이번 동아리 활동에서 상태관리 라이브러리로 Redux를 선정했습니다. 웹뷰쪽을 맡은거라 상태가 그렇게 많지는 않겠지만, 공부 목적으로 그냥 그 유명한 리덕스를 사용해보기로 했습니다. 지난 클론코딩때는 시간에 쫓겨 이해하지않고 방법만 배워 쓴 느낌이 있기 때문입니다. 이번엔 간단하게 Redux에 대해 공부하고 시작해보고자 합니다.
그 전에 상태 관리를 위한 여러 방법들에 대해서 알아보고 가겠습니다.
Context API
Context API는 리액트에서 자체적으로 제공하는 global 값 관리 도구입니다. 즉, 여러 컴포넌트로 바로 값을 전달할 수 있는 것입니다. 간단한 구조의 코딩은 props만 써도 구현이 되지만, 구조가 복잡해지고 앱 규모가 커지면 이 props가 엄청 많아지고 귀찮아집니다. 만약 전달하고자하는 컴포넌트가 저~~~멀리 하위 컴포넌트라면 매우 번거로울 것입니다.
ContextAPI를 사용하면 우리는 useContext를 이용해 하위 컴포넌트로 Context에 있는 상태들을 보낼 수 있게 됩니다. 이러면 앱이 큰 경우에 props drilling으로 인한 리렌더가 더 적게 일어나게 되겠죠.
한편, Context는 최상단에 위치하기 때문에 값이 자주 변하는 state를 넣으면 불필요한 리렌더가 발생하고, 성능저하도 발생합니다. 또, Context에서는 관심사의 분리가 중요합니다. 예를 들어, 학생 데이터와 로그인 상태를 모두 한 Context에서 관리하는데 학생데이터가 바뀐다고 가정합시다. 그럼 쓸데없이 로그인 상태도 같이 리렌더되게 됩니다. 따라서 관심사를 분리해서 코드를 짜는 것이 좋습니다. 전역으로 관리해야하는 값이 많아질수록 관심사도 많아질거고...분리 과정도 복잡해져서 무거운 서비스에서는 부적절하다고 생각됩니다. 아직 그정도의 프로젝트는 진행하지 않았지만요..ㅎㅎ
더 자세한 내용은 공식문서 https://ko.reactjs.org/docs/context.html 를 참고해주세요.
참고로, ContextAPI는 상태관리 라이브러리가 아닙니다. 그저 global하게 값들을 저장할 수 있고, 거기에 setState 함수들을 넣어서 사용하는 것입니다. 그래서 Redux랑 같이 작성하는게 맞나 싶긴 합니다..
Redux
리덕스는 상태관리 라이브러리입니다. ContextAPI랑은 다르죠! Redux를 쓰는 이유를 제 나름대로 정리해보았습니다.
- props drilling을 줄인다. - 근데 이건 위의 Context도 마찬가지
- 미들웨어의 존재 - 요건 나중에 설명
- 굳이 기능별로 안나눠도 됨 - 가장 큰 차이
- 많이 씀 - 예전만큼은 아니지만..구글링하기 좋다
- 최적화 - 리렌더가 많이 안일어남
사용하게 되는 이유 중 "많이 쓴다"는건 무시하기 힘든 이유입니다. 거의 50%가까이 쓰고 있는데요. 에러가 났을 때 구글링하기도 좋기도 합니다. ㅎㅎ
자세한 사용 코드나 작동원리는 다른 글에서 알아보겠습니다.
'Me > FrontEnd' 카테고리의 다른 글
| [JavaScript] const, let, var의 차이점 (0) | 2022.05.05 |
|---|---|
| [JavaScript] 콜백함수(Callback function)과 비동기처리 (0) | 2022.04.30 |
| SCSS에서 변수 사용하기 (0) | 2022.04.24 |
| [React] CRA 중 A template is not provided 에러 해결법 (0) | 2022.04.11 |
| TypeScript를 왜 써야할까 (0) | 2022.03.04 |
댓글