state

• state(상태)는 컴포넌트(Component) 안에서 관리되는 것이다.

• 클래스형 컴포넌트(Class Component)든 함수형 컴포넌트(Functional Component)든 state를 사용하여 값을 바꾼다.

• 즉, 컴포넌트(Component)의 렌더링 결과물에 영향을 주는 데이터를 가지고 있는 객체(Object)이다.

• state값을 바꾸어야 할 때는 setState 혹은 useState()를 통해 전달받은 세터 함수(set이름)를 사용해야 한다.

• state는 바뀔 때마다 불변성 유지가 된다.

Component간의 정보 공유

• 자식 컴포넌트(Component)들 간의 다이렉트 데이터 전달은 불가능하다.

• 자식 컴포넌트(Component)들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트(Component)를 통해서 주고 받는다.

• 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.

• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. (Props Drilling 이슈가 발생한다.)

상태 관리의 복잡성을 해결해주는 라이브러리를 활용

• 상태 관리 툴은 가장 크게 2가지 문제를 해결해준다.

  1. 전역 상태 저장소 제공한다.
  2. Props drilling 이슈 해결해준다.

• 예를 들어, <A>라는 컴포넌트에 상태가 있고, <I>라는 컴포넌트가 해당 상태를 사용한다고 하면,

• 그 중간에 존재하는 <C>, <G> 등은 굳이 name이라는 상태가 필요하지 않음에도, 컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 했다.

• 이를 props drilling(프로퍼티 내려꽂기) 문제라고 부른다.

• 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 된다.

상태 관리 툴 종류

• React Context
• 리덕스(Redux)
• MobX

배열(Array)이나 객체(Object)를 업데이트 할 때

• 이런 상황에서는 배열(Array)이나 객체(Object) 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 혹은 setter 함수를 통해 업데이트한다.

JavaScriptCopy

• 객체(Object)에 확산 연산자(spread operator)라고 불리는 ...을 이용하여 처리하고, 배열(Array)에 대한 사본을 만들 때는 배열(Array)의 내장 함수들을 이용하여 활용한다.