React 의 특장점, 렌더 라이프사이클 및 Hook(4) - State

React Hook 은 함수 컴포넌트를 사용하여 개발하고 함수형 프로그래밍 패러다임을 도입하였다.
따라서 하나의 컴포넌트를 하나의 함수로 생각한다면, State & Props & Ref 세 가지 모두 이해하기가 훨씬 쉽다.

 

• state: 내부 변수 
  • 제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남
  • 내부변수의 의미: 값이 변경되면 컴포넌트 리렌더가 발생함
• props: 파라미터
• Ref: 외부 변수 
  • 비제어 컴포넌트: React가 인지하지 못한 변수이기에 Ref변경 시 렌더링 X
  • 외부 변수의 의미: 값이 변경되어도 컴포넌트 리렌더가 발생하지 않음

---

State: 내부 변수

제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남

• State: 단방향 바인딩에서 컴포넌트 리렌더 기준이 되는 값 = 값이 변경되면 컴포넌트 리렌더 발생
  • Model (JS데이터 변경) -> View (HTML 요소 변경)
• SetState: 단방향 바인딩에서 State값 변경을 위한 Setter함수 = Controller | 상태에 "불변성" 중요
  • Controller(HTML 요소에서 State변경) -> Model(JS 데이터 변경) -> View(HTML 요소 변경)
  • SetState는 비동기로 동작
    • 이벤트 핸들러 내에서 비동기적이다
    • 이로 인해 부모와 자식 모두 click이벤트에서 setState를 호출한다면 자식은 두번 렌더링 되지 않는다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다
    • 즉, `onClick={eventHandler}` 에서 eventHandler함수가 완료되기 전까지 리렌더링이 일어나지 않는다는 의미이다.
  • 바로 수행하지 않고, 차곡차곡 모아두었다가 리렌더링 시 한번에 일괄적으로 상태 변경 적용
  • 동기의 경우 count = count + 1 바로 실행 -> 비동기의 경우 setCount(count + 1) 나중 실행 ( 호출지와 실행지가 다르다)

SetState의 비동기를 잘 보여주는 코드

 // (1) 정상 케이스 : 1 에서 +3 이 더해져서 최종적으로 4 값이 나온다.
setLevel((previous) => previous + 1)
setLevel((previous) => previous + 1)
setLevel((previous) => previous + 1)


//(2) 비정상 케이스 : 1 에서 +1 만 더해져서 최종적으로 2 값이 나온다.
setLevel(level + 1)
setLevel(level + 1)
setLevel(level + 1)

함수를 인자로 사용하면 setLevel의 인자로 사용된 함수는 이전 state 값을 전달 받으며 그 값을 이용한 함수들은 큐에 저장되어 순서대로 실행

따라서 큐에서 차례로 previous 값을 담아 수행할 수 있으니 모든 setState구문이 동작

Model(state)은 view라는 컴포넌트가 리렌더 되냐 안되냐를 결정하는 기준이고, 방향은 단방향 바인딩

controller는 model 을 직접적이로 변경하고 -> 자연스럽게 model의 변경이 view의 변경을 발생

= controller는 view는 간접적으로 변경하게 되는 셈이다.

 

---

ref

• setState에 대해 코드 하나하나 뜯어보며 설명하는 글: https://medium.com/@asdfg9377/react%EC%9D%98-setstate%EA%B0%80-%EC%98%88%EC%83%81%EB%8C%80%EB%A1%9C-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%84%EB%95%8C-5d9ebd3829f9