들어가기에 앞서 check 해보기 (section2 - unit4,6,9 참고)
☑️ React 기초 문법 👉 TIL 27일차 참고
☑️ React Hooks를 사용한 상태 관리 👉 TIL 34일차 참고
- 프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법에 대해서 학습한다.
- 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리인 Redux다.
- React 애플리케이션을 개발할 때, Redux를 사용하면,
React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다.
-
로컬 상태와 전역 상태의 차이점을 이해한다.
o
로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태를 의미한다.
예를 들어 다른 컴포넌트와 데이터를 공유하지 않는 input box, select box 등의 form 데이터는 대부분 로컬 상태다.반면에 전역 상태는 프로덕트 전체나 여러 컴포넌트에서 동시에 관리되는 상태를 의미한다.
예를 들어 장바구니에 담긴 물품의 경우,
상품 선택 여부에 따라 총 주문 금액도 바뀌어야 하고,
장바구니에 담긴 물품은 그 개수 등을 다른 컴포넌트에 전달해주어야 한다. 이런 경우 전역 상태가 필요하다. -
전역 상태의 필요성을 이해한다.
o
서로 다른 컴포넌트가 동일한 상태를 다룬다면,
이 출처는 오직 한 곳이어야 한다.
따라서 한 곳에서만 상태를 저장하고 접근하는 게 좋기 때문에
전역에서 상태를 관리하는 것이 좋다.
이러한 전역 상태는 다크 모드 기능의 경우, 국제화 설정의 경우 등이 있다.다크 모드 기능의 경우,
모든 페이지, 모든 컴포넌트에 다크 모드 또는 라이트 모드가 적용되어야 하므로 이러한 테마 설정을 전역으로 관리할 수도 있다.국제화 설정을 하는 경우,
모든 컴포넌트에서 사용자가 사용하는 브라우저, 운영 체제가 사용하는 특정 언어로 표현되도록 전역에서 상태 관리해야 한다. -
상태 관리 라이브러리의 필요성을 이해한다.
o
상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이에 있는 다른 컴포넌트들은 props를 전달하는 용도로만 쓰이고,
이러한 컴포넌트들을 거쳐 props가 필요한 하위 컴포넌트로
계속 데이터를 전달하는Props Drilling이 있다.이러한
Props Drilling은 상태 관리를 하지 않기 때문에
규모가 크고 복잡한 경우에 사용하면,
데이터의 출처를 쉽게 파악할 수 없어서 코드 가독성이 나빠지고,
유지 보수 또한 힘들어지고, 불필요하게 관여된 컴포넌트 또한 리렌더링 되어 웹성능이 떨어지는 문제점이 있다.이러한 문제점을 해결하기 위해서는
컴포넌트와 관련된 state는 될 수 있으면 가깝게 유지하거나
Redux, React Context, Context.api, Mobx, Recoil, Zustand 등의
상태 관리 라이브러리를 사용한다.이러한 라이브러리들은
데이터 무결성을 위해,
'동일한 데이터'는 '항상 같은 곳'에서 데이터를 가지고 오도록 해야하는
Single source of truth(신뢰할 수 있는 단일 출처) 원칙을
유지할 수 있게 도와준다.이러한 상태 관리 라이브러리가 없어도
충분히 규모 있는 애플리케이션을 만들 수 있다.
하지만 규모가 커질수록 상태관리 라이브러리의 필요성이 높아진다.
또한, 상태의 출처에 대한 추적이 쉽기 때문에 코드의 가독성이 좋아지며,
디버깅이 용이해진다.+) React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서
사용자 인터페이스를 만들기 위해 사용된다.
상태 관리 라이브러리로는 React Context, Redux, MobX 외 에도 recoil, zustand 등이 있다.
과제 - Cmarket Hooks
들어가기에 앞서 check 해보기 (section2 - unit4,6,9 참고)
☑️ React Router 👉 TIL 28일차 참고
☑️ React Hooks 👉 TIL 34일차 참고
- 이번 과제에서는 쇼핑몰 애플리케이션인 Cmarket에서
Hooks를 이용해 상태 관리를 해보는 것이 목표다.- 이 과제를 통해 본격적으로 Redux를 배우기 전,
React Hooks를 사용한 상태 관리 방법을 복습한다.
-
React Router를 통해 라우팅을 할 수 있다.
o
-
useState로 상태를 사용할 수 있다.
o
소감
🔡➡️💻➡️🤓👍
매우 어려웠다.
Redux를 사용하지 않고, 각 컴포넌트에 상태를 연결하고
props를 전달하는 것을 구현하기란 쉽지 않았다.
과제를 제출하는 것은 아니었지만,
페어분과 과제를 다 끝내지 못했다.
내일은 오늘 과제를 Redux를 구현해보는 건데
오늘 과제를 다 이해하고 구현할 수 있어야
내일 과제도 이해할 수 있을 것 같아
라이브 질의응답 시간에 강사님께서 구현해주신 것을 토대로
처음부터 다시 해보려고 한다.
