2. React State
키워드
React state란?
DRY 원칙
SSOT(Single Source of Truth)
useState
1급 객체(first-class object)란?
Lifting State Up
State
변경을 다루기 위한 요소
컴포넌트의 state가 변경되면 해당 컴포넌트와 하위 컴포넌트가 리렌더링 됨
React state의 조건
변경되어야 함. 변경되지 않는 건 state로 다룰 가치가 없다
부모 컴포넌트가 props를 통해 전달한다면 state가 아님
다른 state나 props를 이용해 계산 가능하다면 state가 아님
state는 DRY 원칙을 따르는 SSOT여야함
DRY(Don't Repeat Yourself) : 중복배제
SSOT(Single Source of Truth) : 단일 진실 공급원. 데이터 요소를 한 곳에서만 제어 또는 편집하도록 조직하는 관례. 수정사항 반영이 누락된 사본이 존재할 가능성을 없앰
State 끌어올리기
컴포넌트 간에 state를 공유하는 일은 그 값을 필요로하는 가장 가까운 조상으로 state를 끌어올림으로써 가능
state는 의존적인 컴포넌트를 모두 포함하는 컴포넌트가 소유해야함
Inverse Data Flow
끌어올려진 state에 대한 조작을 하위 컴포넌트들이 수행하기 위해서는 하위 컴포넌트의 props로 함수를 전달해야함
자바스크립트에서 함수는 일급객체이기 떄문에 어떤 함수를 다른 함수에 인자로 넘겨주거나, 어떤 함수를 리턴 값으로 사용할 수 있음
일급 객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현
변수에 함수 할당 가능
함수를 인자로 전달 가능
함수가 함수를 반환 가능(고차함수)
Last updated