상태 관리하기 State (2) | React

상태 관리하기 Managing State

 

---

애플리케이션이 커짐에 따라

• state가 어떻게 구성되어 있고
• 컴포넌트간 데이터가 어떻게 흐르는지

에 대해 더욱 의도적인 것이 도움이 됩니다.

버그는 일반적으로 많거나 중복된 state에 의해 발생하죠.

---

input에 state를 사용하여 반응하기 Reating to input with state

React에서는 UI를 코드로 직접 수정할 수 없습니다.

• 버튼 비활성화 disable the button
• 버튼 활성화 enable the button
• 성공 메시지 표시 show the success message

등의 명령어를 사용할 수 없죠.

대신에, 컴포넌트의 다른 시각적 상태에 보고싶은 UI를 설명합니다.

• 초기 상태 initial state
• 입력 상태 typing state
• 성공 상태 success state

그리고 유저의 input에 따라 상태 변경을 발생시킵니다.

디자이너가 UI에 대해 생각하는 방식과 비슷합니다!

 

상태 구조 정하기 Choosing the state structure

state를 잘 구조화하는 것은 수정 및 디버깅하기 좋은 컴포넌트와 버그가 끊이지 않는 소스의 컴포넌트 간에 차이를 만듭니다.

가장 중요한 원칙은 state는 많거나 중복된 정보를 포함하지 않는다는 것입니다.

불팰요한 state가 있으면 업데이트하는 것을 잊기 쉽고, 버그가 발생할 수 있습니다.

 

컴포넌트간 상태 공유하기 Sharing state between components

가끔 두 컴포넌트의 상태가 항상 같이 변경되었으면 하는 때가 있습니다.

두 컴포넌트의 state를 모두 삭제하고 가장 가까운 공통된 부모로 옮긴 후 props를 통해 자식으로 전달합니다.

lifting state up이라는 이 방식은 React로 코드를 작성할 때 아주 많이 사용합니다.

 

한 번에 하나의 패널만 active하고 싶은 경우,

각 패널 안에 active 상태를 유지하는 대신에 부모 컴포넌트가 state를 가지고 있고 자식에게 props로 지정하는 방식을 사용합니다.

 

 

Managing State – React