Core Concepts

React 핵심 개념 연결

React의 장점은 컴포넌트, 선언적 렌더링, 가상 DOM, 단방향 데이터 흐름이 함께 작동할 때 가장 잘 드러납니다.

Props외부 입력
ComponentUI 계산
State내부 변화
Render화면 반영
01

선언적 UI

상태가 이러하면 화면은 이렇게 보여야 한다는 식으로 작성합니다.

02

컴포넌트

작은 UI 단위를 조합해 큰 화면을 만들고 재사용성을 높입니다.

03

가상 DOM

변경된 UI를 비교해 실제 DOM 반영 비용을 줄입니다.

04

단방향 흐름

데이터가 위에서 아래로 흐르므로 변경 경로를 추적하기 쉽습니다.

처음 구분할 것

  • props는 부모가 주는 값이고 state는 컴포넌트 내부에서 바뀌는 값입니다.
  • 렌더링은 화면을 계산하는 일이지 항상 DOM 전체를 다시 만드는 뜻은 아닙니다.
  • 상태 위치를 잘못 잡으면 여러 컴포넌트가 같은 데이터를 어긋나게 봅니다.

개념 매칭

Props입력
State변화
Render계산
DOM반영