12. 전역 상태 관리

 

12-1. 전역 상태 관리란?

 

리덕스, 리코일

전역 상태 관리 라이브러리

• Redux
• Recoil
• ContextAPI
• MobX

 

 

https://velog.io/@rachel28/Prop-Drilling

 

 

위 이미지에서 컴포넌트들이 위처럼 구조화되어 있고, 최상위 컴포넌트에서 최하위 컴포넌트까지 props를 전달하고 있다.

위 과정을 prop drilling 이라고 한다.

 

그런데 만약 여기서 최상위 컴포넌트의 state가 변경된다면?

해당 state 값을 사용하는 컴포넌트는 하위 주황색 2개 컴포넌트인데, 굳이 리렌더링 되지 않아도 되는 데이터가 전달되는 과정에서 거쳐간 컴포넌트들 모두가 리렌더링이 되어버린다.

-> prop drilling은 리액트 서비스의 성능을 저하시키는 한 요인이 된다.

 

그래서 상태를 여러 컴포넌트와 공유해서 사용해야 하는 경우 전역 상태라는 것을 만들어서 사용한다.

 

원래 컴포넌트 내부에 있어야 할 스테이트를 밖으로 빼면서 필요한 컴포넌트에만 연결해서 사용하는 것이다.

이 때 뺀 것을 일반적으로 스토어라고 부르고, 이런 상태틑 global state 라고 한다.

 

 

12-2 Recoil 이란?

....

....

 

 

atom 사용 예제 코드

 

atom 데이터 가져와서 출력한 결과

 

 

selecter로 데이터 가져와서 출력한 결과

 

 

 

 

 

12-3. Recoil로 데이터 관리하기

 

 

12-4. Custom hook 만들기

Custom Hook : 하나 이상의 Hooks를 조합해서 만든 새로운 Hook

쉽게 이야기해서 내부적으로 hooks를 포함하고 있는 함수라고 생각할 수도 있다.

주로 반복적인 hooks 로직을 재사용하기 위해 사용한다.