[React 입문 Day 2] state, 렌더링, Virtual DOM 간단 정리

Props

 

📍props란?

• 컴포넌트 간의 정보 교환 방식
  • 부모 → 자식에게 데이터(객체 형태)를 전달하는 구조.

📍특징

1. 단방향 데이터 흐름: 반드시 부모 → 자식 방향으로만 전달된다.
2. 읽기 전용: props는 수정하지 않고 전달받은 그대로 사용한다.

 

📍사용 형태

• 전달하기 (부모 컴포넌트):

return <Child motherName={name} />; // props로 'name'을 전달

• 받기 (자식 컴포넌트):

function Child(props) {
    console.log(props); // 전달받은 props 출력
    return <div>연결 성공</div>;
}

 

 

 

State

 

📍state란?

• 컴포넌트 내부에서 바뀔 수 있는 값.
• UI 반영을 위해 값이 변해야 할 때 사용.
• 'hook' 이라고도 한다.

📍State 생성 방법

• useState()를 사용하여 state를 선언한다.
• 초기 형식

const [value, setValue] = useState(초기값);
// 배열의 구조분해 할당이 사용된다.

 

• value: 현재 state 값.
• setValue: state 값을 업데이트하는 함수.
• 초기값: state의 초기 상태 값. (= initial state)

 

렌더링

 

📍렌더링 트리거 (언제 렌더링이 발생하는가?)

1. 컴포넌트 내부의 state가 변경되었을 때.
2. 새로운 props가 전달되었을 때.
3. 상위 부모 컴포넌트에서 렌더링이 발생했을 때.

 

📍리렌더링 동작 원리

• React는 state의 주소값을 확인하여 변경 여부를 판단.
• 불변성 유지가 중요:
  • 배열의 push를 사용하면 안 됨.
  • 새로운 객체 또는 배열로 변경 후 set 해야 React가 이를 감지하여 리렌더링 실행.

 

DOM, Virtual DOM

 

 

📍Virtual DOM이란?

• 실제 DOM의 복사본으로, 변경 사항을 기록하는 가상 시스템.
• 작동 방식:
  1. 변경 사항을 Virtual DOM에 저장.
  2. 변경된 부분만 실제 DOM에 반영.

 

📍비교

• 실제 DOM:
  • 변경 사항마다 화면을 갱신해야 함.
• 가상 DOM:
  • Batch Update를 통해 한 번에 변경 사항을 반영.
  • 효율적으로 렌더링 처리.

 

📍React의 렌더링 과정

1. React가 Virtual DOM을 업데이트.
2. Virtual DOM과 실제 DOM을 비교(Diffing).
3. 변경 사항을 실제 DOM에 반영.
4. 브라우저의 렌더링 엔진이 화면을 갱신.