본문 바로가기
Frontend/React.js

React의 상태관리(Redux, Recoil)

by 오후 6시의 봄 2023. 2. 3.

Redux

리액트의 상태관리 라이브러리, state = props를 통해 전송되는 사용자 지정 변수

하위 컴포넌트로 state를 전달할 때, 바로 하위의 컴포넌트로만 전송이 가능

여러 컴포넌트가 중첩되는 경우 props 문법을 component 마다 작성해야 되는 경우가 생김

이럴 때 Redux 라이브러리를 활용하면 좋음 >>> state를 한 곳에 몰아서 보관

주요 state를 보관하고 필요한 컴포넌트에서 꺼내서 활용하면 됨

state를 활용한 작업을 일괄적으로 작성해두고 API처럼 호출해서 사용 가능 < 관리가 편함 

(실제 활용 예시)
redux toolkit으로 쓰면 더 쉽고 거기에 타입스크립트로 쓰면 큰 프로젝트 스케일링하기도 편함

쇼핑몰 장바구니 - 아이템 추가, 제거, 수량 변경 같은 걸 구현하기 쉬움

 

Recoil

Global state를 관리하는 리액트 전용 라이브러리

atom이라는 단위로 관리되며, react의 hook과 유사한 구조

atom 단위로 관리되기 때문에 필요한 컴포넌트에서만 다시 렌더링 가능

읽기 전용과 쓰기 전용 함수가 제공됨

비동기요청 때 서스펜스나 에러바운더리 컴포넌트를 사용할 수 있음

(실제 활용 예시)

 

상태관리 초기 설계시 주의할 점

  • 간단한 건 hooks와 props로 충분히 관리 가능 >> 전역변수는 최소화 하는 것이 좋음
  • 여러 상태 값을 용도에 따라 분류
  • 캐싱(코드성 데이터), 자주 바뀌지 않는 정보, 실시간 데이터를 파악하여 관리

 

상태관리라고 이해하려고 하니까 이게 뭔지 막연했던 부분이었는데 컴포넌트들에서 끌어다 쓰는 변수(상태, state)를 관리하기 편하다는 장점이 있다. 하지만 전역변수 사용 자체를 지양하는 추세에, 코드 구조를 명확히 하지 않은 채로 어플리케이션이 커지면
전역변수 관리 자체가 어렵다는 단점이 있다.
이번 팀 프로젝트에서 Redux를 사용하기로 했는데 지속적으로 어플리케이션을 해치지 않는 활용방안을 고민하면서 공부해야겠다는 생각이 들었다.

 

 

참고 - 유튜브 코딩애플, Ben Awad, FEConf

https://youtu.be/0-UaleJZOw8
https://youtu.be/QZcYz2NrDIs

https://youtu.be/BhQYZmaxTCM

'Frontend > React.js' 카테고리의 다른 글

React의 component, state, props  (0) 2023.01.31
React 환경설정 및 구동  (0) 2023.01.20