22.07.06_TIL

📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!!

📗 오늘 학습한 내용

Redux

• 상태 관리 라이브러리 (React 없이도 사용 가능)
• 컴포넌트와 상태를 분리하는 패턴
• 상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다.

Redux를 사용하는 이유

1. 모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다.
   • 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는데 하위 컴포넌트가 너무 많을 경우 사용한다.
   • state를 보관하는 파일을 하나 만들어서 state를 보관하여 모든 컴포넌트들이 props 없이 꺼내서 사용할 수 있다.
2. 상태(state)를 관리하기 용이하다.
   • 모든 컴포넌트에서 state를 변경하기 시작할 경우 Redux를 사용하지 않는다면 에러를 찾기 힘들지만 state 저장소에서 바로 찾을 수 있다.

Redux의 상태 관리 구조: (Action → Dispatch → Reducer → Store)

1. 상태가 변경되어야 하는 이벤트가 발생하면 변경될상태에 대한 정보가 담긴 Action 객체 생성
2. Action객체: Dispatch 함수의 인자로 전달
   • 어떤 액션을 취할 것인지 정의해 놓은 객체
   • type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문에 필수로 지정해야 한다.(대문자, Snake Case로 작성)
   •  payload* : 액션에 필요한 추가 데이터
3. Dispatch 함수: Action 객체를 Reducer 함수로 전달
   • Reducer로 Action을 전달해주는 함수
4. Reducer 함수: Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
   • Dispatch에게서 전달받은 Action 객체의 type에 따라 상태를 변경하는 함수 (순수 함수)
5. 상태가 변경되면, React는 화면을 재 렌더링
6. Store: 상태가 관리되는 오직 하나뿐인 저장소의 역할

Redux의 세 가지 원칙

1. Single source of truth
   • 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
2. State is read-only
   • 상태는 읽기 전용이라는 뜻으로, Redux의 상태를 직접 변경할 수 없고, Action 객체가 있어야만 상태를 변경할 수 있다.
3. Changes are made with pure functions
   • 변경은 순수함수로만 가능하다.
   • 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Redux 복습해보기

 

📝 중요한 내용

• Redux의 구조: Action -> Dispatch -> Reducer -> Store
• Redux를 사용하는 이유
• Redux의 세 가지 원칙