[React] React의 특징

React는 SPA(Single Page Application) 라이브러리로, 기존의 SSR(Server Side Rendering) 방식과 달리 CSR(Client Side Rendering)을 기본적으로 사용합니다. 이를 통해 서버 부하를 줄일 수있습니다.

1. SSR(Server Side Rendering) vs CSR(Client Side Rendering)

• SSR(Server Side Rendering)
  • 서버에서 HTML을 미리 생성하여 클라이언트에 전달하는 방식입니다.
  • 페이지 이동 시마다 새로운 HTML을 서버에서 받아야 하므로 서버 부하가 큼.
  • 예: 전통적인 웹사이트, Next.js 등의 프레임워크에서 지원.
• CSR(Client Side Rendering)
  • 서버에서 데이터만 받아오고, HTML과 UI는 클라이언트(브라우저)에서 렌더링합니다.
  • 서버 부하를 줄이고, 이미 받은 리소스를 재사용할 수 있어 성능 최적화에 유리함.
  • React는 기본적으로 CSR 방식을 사용하여 SPA(Single Page Application)를 구현함.

2. React의 핵심 개념

1) 컴포넌트 기반 구조

• React는 컴포넌트(Component) 단위로 UI를 구성하여 재사용성과 유지보수성이 뛰어남.
• 컴포넌트는 부모-자식 관계를 가지며, 최상위는 Page 개념이고, 내부에 Header, Banner 등이 포함될 수 있음.

2) Virtual DOM

• Virtual DOM(가상 DOM)은 실제 DOM의 복사본으로, SPA에서 동적인 변화를 효율적으로 관리하기 위해 사용됨.
• React는 변경 사항이 있을 때 전체 DOM을 다시 그리지 않고, Virtual DOM과 비교하여 변경된 부분만 업데이트함 → 성능 최적화.

3) JSX (JavaScript XML)

• JSX는 HTML과 유사하지만 내부에서 JavaScript를 사용할 수 있는 문법.
• React는 JSX를 이용하여 컴포넌트를 정의하고 화면을 렌더링함.

function Welcome() {
  return <h1>안녕하세요, React입니다!</h1>;
}

• JSX는 결국 JavaScript 코드로 변환됨.

마운트(Mount)란?

마운트(Mount)란, 컴포넌트가 처음으로 생성되어 DOM에 추가되는 과정을 의미합니다.
즉, 컴포넌트가 화면에 나타날 때 발생하는 생명주기(Lifecycle) 단계입니다.

React 컴포넌트 생명주기(Lifecycle)

React 컴포넌트는 크게 마운트(Mount), 업데이트(Update), 언마운트(Unmount) 3가지 단계로 나뉩니다.

1. Mount (마운트)
   • 컴포넌트가 처음 화면에 등장할 때 실행됨.
   • constructor → render → componentDidMount 순서로 실행됨.
2. Update (업데이트)
   • props나 state가 변경될 때 실행됨.
   • shouldComponentUpdate → render → componentDidUpdate
3. Unmount (언마운트)
   • 컴포넌트가 제거될 때 실행됨.
   • componentWillUnmount 함수가 호출됨.

유용한 라이브러리

 

CodeSandBox: 별도의 설정 없이 웹에서 바로 React 개발 가능.

Create React App(CRA): npx create-react-app my-app 명령어로 로컬 환경에서 React 프로젝트 생성 가능.