React 상호작용 추가하기

State: 컴포넌트의 메모리

상호작용으로 화면의 내용을 변경해야하는 경우가 많음
컴포넌트는 변경되는 내용을 "기억" 해야함
React 에서는 컴포넌트별 메모리를 state 라고 부름

 

 

Render and commit

 

Step 1. trigger render: react가 손님의 주문을 주방으로 전달

• 컴포넌트 렌더링을 촉발시키는 원인은 두가지
  1. 컴포넌트의 첫 렌더링
  2. 컴포넌트의 state(또는 상위 요소중 하나) 가 업데이트된 경우
   

컴포넌트의 state 또는 상위 컴포넌트중 하나가 업데이트된 경우

 

set 함수로 state 가 업데이트 되고 이것은 렌더링을 촉발시킴
컴포넌트의 state를 업데이트하면 자동으로 렌더링 대기열에 추가됨 (즉시 렌더링이 되는것이 아님)

 

Step 2. React가 컴포넌트를 렌더링합니다

랜더링을 촉발시키면 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악
"렌더링"은 React에서 컴포넌트를 호출하는것

 

• 첫 렌더링에서 React는 루트 컴포넌트를 호출
• 이후 렌더링에서는 React는 state update에 의해 렌더링이 trigger된 컴포넌트를 호출

❗️ [ 랜더링은 항상 순수한 계산이어야 함 ]

 -  동일한 입력에는 동일한 출력
 - 이전의 state를 변경해서는 안됨
 - Strict Mode에서 컴포넌트의 함수를 두번 호출하여 순수하지 않은 함수로 인한 실수를 추적하는데 도움을 줌( useEffect시 console 두번 찍히는 이유) -> 동일한 update로 랜더링 될때 같은 결과를 리턴해야함을 증명하는것으로 보임

 

Step 3. React가 DOM에 변경사항을 커밋

• 초기 렌더링의 경우 appendChild()를 통해 생성한 모든 DOM 노드를 화면에 표시
• re-render의 경우 React는 필요한 최소한의 작업(렌더링 하는동안 계상된것)을 적용하여 DOM 이 최신렌더링 결과와 일치하도록함
• React는 렌더링간 차이가 있는 경우만 DOM 노드 변경

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

위 예제에서 time prop이 변경되면 현재 컴포넌트 하위의 모든 컴포넌트가 re-render됨 
하지만 input의 value는 초기화 되지않음 
이유 => re-render의 결과와 DOM 의 차이가 없기때문에 DOM이 변경되지 않음

 

 

Step 4. 브라우저 페인트

렌더링, DOM 업데이트를 한후 브라우저는 화면을 다시 그림
이것을 "브라우저 렌더링" 이라고 하지만 혼동이 있을수 있어 페인팅이라 부름

 

---

스냅샷으로서의 state

state를 설정하면 rendering 이 촉발됨

버튼 클릭시예시

1. onSubmit 이벤트 핸들러 실행
2. 상태 업데이트 함수(setxxx) 를 호출하여 새 렌더링을 큐에 대기시킴
3. react는 새로운 상태값에 따라 컴포넌트를 다시 렌더링함

redering

rendering 이란 react가 함수를 호출한다는 뜻.
해당 함수에서 반환하는 JSX는 UI의 스냅샷과 같음
prop, event handler, 변수 는 모두 함수호출 당시의 state를 사용해 계산됨

 

re-render

1. react 가 함수 호출
2. JSX 스냅샷 반환
3. React가 반환된 스냅샷과 일치하도록 화면 업데이트

 

 

state는 함수가 반환된 후 사라지는 일반 변수와 다름

state는 함수 외부 선반에 있는것 처럼 React 자체에 "존재"함

 

 

 

 

 

참고문서

https://react-ko.dev/learn/render-and-commit