1. 오늘의 질문
대규모의 복잡한 단일 페이지 애플리케이션(SPA)을 개발하는 팀의 일원입니다. 애플리케이션은 사용자 인터페이스(UI)가 다이나믹하게 변화하고, 수많은 상태(state)를 관리해야 합니다. 상태 관리와 성능 최적화가 중요시되는 상황입니다. React를 사용하여 이 애플리케이션에서 상태를 관리할 때 Context API, Redux, 그리고 Zustand의 장단점을 설명하시오.
2. Context API
2-1. 특징
- 리액트에서 제공하는 기능으로, 리액트 컴포넌트 트리 전체에 데이터를 전달할 수 있다.
- 리액트 컴포넌트에서 props가 아닌 또 다른 방식으로 컴포넌트간 값을 전달하는 방법이며, 때문에 props drilling이 발생하지 않는다.
- 중요한 점은 상태(데이터)를 공유하기 위한
환경만 제공함. 상태 관리하는 로직은 개발자가 알아서 개발해야함. - 여러 개의 독립적인 Context를 만들수도 있음
- Context Provider 컴포넌트 내에서 관리하는 상태가 변경될 때 Context 값이 변경되고, 하위의 모든 컴포넌트들이 리렌더링됨
2-2. 사용법
createContext로 Context를 생성한뒤,
생성된 Context 객체의 provider로 전달해야하는 컴포넌트들의 부모를 감싼다.
provider에는 value를 props로 전달해줌
그리고 상태(데이터)를 사용하는 컴포넌트에서는 useContext로 value에 접근할 수 있게 됨
2-3. 참고한 사이트
2-4. 나중에 참고해보기
2-5. 한 줄 정리
Context API는 React 컴포넌트 트리 전체에 걸쳐 데이터를 prop drilling 없이 전역적으로 공유할 수 있게 해주는 기능
3. redux
3-1. redux가 생기게 된 배경
: 여러 컴포넌트에서 상태를 변경하게 될 경우 어디에서 상태를 변경하게 되어 문제가 발생했는지 찾기가 어려움
즉, 언제 어디서 상태가 업데이트되는지 파악하기 힘듬
3-2. 특징
- 리덕스는 flux 패턴을 구현한 라이브러리
- 여러 컴포넌트에서 사용하는 상태를 한 곳에서 접근하고 관리할 수 있음
3- . 참고한 사이트
장단점
| Context API | redux | zustand | |
|---|---|---|---|
| 장점 | react에 내장되어 있어 추가 라이브러리 설치가 필요 없음 | 규모가 큰 프로젝트에서 한 곳에서 상태관리하기 용이함 | 간단함 |
| 단점 | 규모가 큰 프로젝트에서 상태를 관리하는데 복잡해질 수 있음 | 초기 설정이 복잡함 | redux만큼 커뮤니티가 활성화되어 있지 않음 |
삐약