TIL: 2022-11-01

⚙️ 오늘 배운 주제

React 상태 관리

 

🐹 오늘의 기분

오늘은 잠깐 상태 관리에 대해 학습하고 쇼핑몰 사이트의 장바구니 기능을 구현하는 과제를 했다. 처음으로 셋이서 페어를 해봤는데 재밌었다. 처음부터 전부 작성하는게 아니라 이미 작성된 파일에 장바구니의 기능만 추가하는 거라 전체적인 파일 구조를 파악하는게 우선이었다. 그런데 이게 복잡하게 얽혀있어서 쉽지 않았다. 왜 그림을 그려보고 하라고 했는지 이해가 되는 순간이었다. 페어분이 너무 잘하셔서 슉슉 끝났다. 혼자서 다시 풀어봐야지

 

🗝 키워드

상태 관리, Redux, Props drilling

 

🗣 스스로에게 설명

상태 = 동적으로 표현되는 데이터

들어오는 데이터가 가짜 데이터라 할지라도 일단 컴포넌트를 구현하는 것에 집중한다.

로컬 상태 -> 컴포넌트 내에서만 영향을 끼치는 상태.
다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터는 대부분 로컬 상태이다.

서로 다른 컴포넌트가 동일한 상태를 다룬다면 상태의 출처는 오직 한 곳이어야 한다.
(React one-way data flow, single source of truth)

전역 상태 -> 컴포넌트 전체에 영향을 끼치는 상태.
전역 상태의 예: 다크모드, 국제화 설정(언어 변경), 히스토리 등

(전역 상태와 로컬 상태는 이해를 돕기 위해 쉽게 풀어쓴 단어일 뿐, 실제로는 이렇게 쓰지 않는다.)

Props Drilling

사진 출처: Medium

props를 전달받을 컴포넌트가 트리 구조상 아래에 있을 경우 props가 필요없는 컴포넌트에게도 props를 전달해줘야하는 현상을 말한다.
이렇게 하면 계속 props를 또 내려줘야 하고, 같은 코드가 여러 번 작성되기 때문에 코드의 가독성이 안 좋아지고 유지보수도 어려워진다는 문제가 있다.
props가 내려가야할 계층이 5개 이하라면 괜찮지만, 그 이상이라면 해결 방법을 생각해봐야 한다.

 

1. props를 전달할 컴포넌트를 최대한 가까이 둔다.
2. 상태 관리 라이브러리를 사용한다.

(찾아보니 props.childern을 쓰는 방법도 있다고 한다)

 

상태 관리 라이브러리에는 여러 가지가 있다.

• React Context
• Redux
• MobX

우리는 Redux를 배울 예정이다.

상태 관리 라이브러리는 전역 상태 저장소를 제공하는데 상태가 필요할 때마다 여기서 꺼내오면 된다.

 

🔎 공부가 더 필요한 부분

오늘 과제 스스로 다시 해볼 것