React | React란?

React

현대적이고 강력한 사용자 경험(UX)을 제공하는 접근성 높은 JavaScritp 라이브러리

 

Facebood(현 Meta)에서 만든 UI 개발 자바스크립트 라이브러리

 

현존하는 JavaScript UI 라이브러리 중에서 가장 많이 사용하고 있으며 현업에서 React는 중요한 기술 스택 중 하나로 자리 잡아있다

온라인상에 풍부한 자료와 예제 코드, 질문과 답변을 찾아보기도 편리!

 

HTML, CSS. JS를 사용해서 만드는 것보다 더 체계적이고 성능이 좋은 웹 어플리케이션을 만들 수 있음

 

React의 주요 특징

• 가상 DOM을 통한 효율적인 렌더링
• 컴포넌트 기반의 재사용 가능한 UI
• 단방향 데이터 바인딩
• JSX 문법을 통한 직관적인 UI 작성
• SPA 개발 지원
• 활발한 커뮤니티와 생태계

 

React를 사용한 대표적인 웹 사이트

• 인스타그램
• 토스
• 에어비엔비
• 넷플릭스
• 등 등..

 

React를 학습하는 이유

• 신뢰할 수 있는 라이브러리
• 오픈 소스 라이브러리
• 방대한 커뮤니티

 

---

React의 특징

 

컴포넌트 기반 개발(CDD, Component Driven Development)

• 컴포넌트란 독립적이고 재사용 가능한 독립된 단위를 의미. 위 사진과 같이 각각 독립된 컴포넌트들을 조합하여 페이지 구성
• 컴포넌트 기반 개발은 코드를 작성할 때 같은 컴포넌트를 여러 번 사용할 수 있으므로 생산성을 높여줌. 또, 코드를 모듈화하고 각각의 기능을 분리함으로써 개발과 유지보수를 쉽게 만듬

 

화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론

 

만들어둔 컴포넌트들은 html 요소들처럼 내가 사용하고 싶은 곳에 얼마든지 사용할 수 있기때문에 다양한 구조로 사용될 수 있으며,

조립한 컴포넌트들로 또 다른 컴포넌트를 구성 할 수 있다

 

 

선언적 프로그래밍

'상태(State)'라는 데이터가 변화하면 변화한 상태에 맞춰 화면변경

"어떻게(How)" 특정 작업을 수행해야 하는지 지시하기보다는

"무엇(What)"을 결과로 얻고자 하는지를 설명하는 방식

 

선언적 프로그래밍(React로 조작하기) <-> 명령적 프로그래밍(DOM으로 직접 조작하기)

 

명령적 프로그래밍 예시

 - DOM에서 치즈 요소를 찾아서 DOM 구조에서 제거하고 패티 요소를 찾아서 제거한 다음 토마토 다음에 append하자

 

원하는 결과를 얻기위해 어떻게 해야하는지 일일이 작성해야 함

 

선언적 프로그래밍 예시

- 치즈를 빼고 패티는 맨 밑으로 옮겨서 표시, 내가 알아서 DOM 조작하고 화면 렌더링할게

 

결과가 명시되면 필요한 작업은 React가 알아서 처리해 줌

 

 

가상 DOM

UI의 상태 변화를 실제 DOM에 직접 반영하기 전에 가상의 DOM을 만든 다음
실제 DOM과 비교해서 최소한의 변경만 실제 DOM에 적용하는 방식

 

Virtual DOM 동작 방식

• React는 가상 DOM을 사용하는 가장 대표적인 예로 React는 컴포넌트의 상태가 변경될 때 가상 DOM에 먼저 이러한 변경 사항을 반영한다
• 가상 DOM은 실제 DOM의 경량화 된 복사본으로, 실제 DOM에 직접적인 변화를 주기 전에 변경사항을 먼저 가상 DOM에 적용함으로써, 필요한 최소한의 변경만 실제 DOM에 반영하는 방식으로 동작한다
• 가상 DOM을 사용하면 대규모 업데이트가 필요한 복잡한 애플리케이션에서도 리소스 사용을 최적화하고, 애플리케이션의 반응 속도를 크게 개선하며, 높은 성능을 유지할 수 있다

1. 초기 렌더링 : 애플리케이션이 처음 로드될 때, 모든 컴포넌트가 가상 DOM에 렌더링 된다. 이후, 가상 DOM을 기반으로 실제 DOM이 생성되어 UI가 사용자에게 표시된다
2. 상태 변화 : 사용자 상호작용이나 데이터 업데이트 등으로 컴포넌트의 상태가 변하면, 해당 컴포넌트는 가상 DOM에 다시 렌더링 됨
3. 가상 DOM 비교 : 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 식별
4. 변경 사항 반영 : 식별된 변경 사항을 실제 DOM에 반영함. 이 과정에서 전체 DOM을 다시 그리는 대신, 변경된 부분만 업데이트하여 성능을 최적화 함
5. UI 업데이트 : 실제 DOM이 업데이트되면, 화면에 보이는 UI도 변경 사항을 반영하여 업데이트 됨

 

짧게 설명하는 작용 방식

1. 특정 컴포넌트에서 상태 변화(데이터 변화) 발생
2. 화면이 어떻게 변하는지 가상 DOM을 그려봄
3. 상태 변화에 따라서 DOM 구조가 변경되는 컴포넌트
4. 가상 DOM과 실제 DOM 비교
5. 실제 DOM에서 변경이 필요한 부분 확인
6. 실제 DOM 변경

 

- 동시에 여러가지 상태가 변화한다면?

1. 상태 1 변화에 따른 DOM 구조 변화 확인
2. 상태 2 변화에 따른 DOM 구조 변화 확인
3. 두 상태 변화를 종합한 DOM 구조 변화 확인
4. 실제 DOM과 비교한 다음 최종 구조를 실제 DOM에 반영

여러 변경 사항이 있을때, 그 결과를 한번에 DOM에 반영 가능

-> 불필요한 DOM 조작 down, 애플리케이션 성능 up

 

프로젝트 규모가 커지고 상태 개수가 많아질 수록 두드러짐!!

 

주의점

가상 DOM 방식이 실제 DOM 방식보다 더 빠른건 아님

가상 DOM을 그리고 비교하는 과정이 추가로 필요해서 시간이 더 들수 있지만,

그만큼 불필요한 동작을 막을 수 있어서 성능이 더 좋음

 

 

SPA을 통한 강력한 사용자 경험(UX) 제공

SPA(Single Page Applicatione)

단일 페이지 애플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식을 의미

사용자가 애플리케이션과 상호작용할 때마다 서버에게 요청하여 전체 HTML화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있다

 

SPA 사용이 주는 이점

1. 빠른 사용자 경험 : SPA는 초기 로딩 후 페이지를 다시 로드할 필요가 없으므로 사용자 경험이 더 빠르고 반응성이 뛰어나다
2. 서버 부담 감소 : 필요한 데이터만 요청하고 업데이트하므로 서버 부하가 줄어듬. 전체 페이지를 새로 로드 할 필요가 없으므로 서버에 대한 요청이 줄어듬
3. 뛰어난 사용자 경험 : 페이지 간 전환 없이 사용자 인터랙션을 지원하므로, 애플리케이션의 사용자 경험이 향상됨. 사용자는 자연스럽게 앱을 탐색하고 필요한 데이터를 받아오며, 이로 인해 사용자들의 만족도가 높아진다

React로 SPA 구현

React는 보통 배포 시 모든 JS와 CSS를 번들링하여 단일 HTML 파일에 포함하는데, 이를 통해 사용자가 앱을 로드할 때 한 번의 요청으로 필요한 모든 자원을 다운로드할 수 있게 된다

 

• React SPA 구현을 돕는 라이브러리로는 React Router가 있음

 

---

React로 개발을 하는 이유

<Vanilla JavaScript와 비교한 React를 사용하는 이유>

 

코드의 일관성

Vanilla JavaScript는 웹 개발에서 사용되는 순수 JavaScript를 가리킴

이러한 순수 개발은 코드의 정해진 규격이 없다 보니, 코드의 일관성이 떨어지게 되며 협업 시 서로의 코드에 적용하기 어려울 수 있다는 단점이 있다

 

//예시1: 변수 선언 및 네이밍

var name = 'John Oz';
let age=30;
const PROFESSION = "Developer";

// 일관성 없는 변수 선언과 네이밍
var user_address = '345 Main St';
let UserEmail = 'john.oz@example.com';
const phoneNumber = '123-456-7890';


//예시2: 함수 선언

function calculateTotal(price, tax) {
    return price + (price * tax);
}
var getUserName = function(userId) {
    // 사용자 이름 조회 로직
}
const FetchData = () => {
    // 데이터 가져오기 로직
}

예시1

-> 변수 선언 (var, let, const) 방식이 일관되지 않고, 네이밍 규칙(camelCase, snake_case, PascalCase)이 혼합되어 사용된 예시

 

예시2

-> 함수를 선언하는 방식과 함수 이름에 대한 네이밍 규칙이 일관성 없이 사용된 예시

 

 

• 리액트에서는 컴포넌트 구조, 네이밍 규칙, 파일 구조, 상태 관리 방식 등 여러 측면에서 일관된 규칙을 적용할 수 있다. 이를 통해 코드의 일관성을 더욱 높일 수 있으며, 프로젝트의 가독성과 유지보수성을 크게 향상할 수 있다

// 컴포넌트 구조 예시

//Profile.jsx
import React from 'react';

const Profile = ({ user }) => (
  <div className="user-profile">
    <img src={user.profileUrl} />
    <h2>{user.name}</h2
    <p>{user.age}</p>
  </div>
);

export default Profile;

 

React 컴포넌트 네이밍 규칙

• 컴포넌트 이름은 항상 PascalCase를 사용
• 파일 이름은 컴포넌트 이름과 일치시켜야 함

 

SPA

• SPA는 단일 페이지 애플리케이션으로, 페이지 로딩 시 초기에 필요한 모든 리소스를 로드 하고, 이후에는 새로운 콘텐츠를 동적으로 로드하여 전체 페이지를 새로고침하지 않고도 상호작용할 수 있도록 한다

 

가상 DOM

• Vanilla JavaScript는 실제 DOM을 조작하여 작업하다 보니 변경 사항이 생기면 전체 페이지를 다시 렌더링하게 됨. 이는 페이지에 여러 정보와 코드가 쌓이게 되면 꽤 무거운 작업이 된다
• 반면, React는 가상 DOM을 사용하는 가장 대표적인 예시 중 하나로 React는 컴포넌트의 상태가 변경될 때 가상 DOM에 먼저 이러한 변경 사항을 반영한다
• 가상 DOM은 실제 DOM의 가벼운 복제본으로, React에서 상태 변화에 따른 효율적인 UI 업데이트를 가능하도록 한다. React는 상태 변화가 있을 때 가상 DOM을 업데이트하고, 실제 DOM에 필요한 변경 사항만을 적용하여 성능을 최적화한다

 

---

React 공식문서

Hello World – React