[React] Props drilling & GlobalState

DongEun·2022년 11월 29일

Props drilling

Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.

만약에 마이페이지에서 프로필로 데이터를 전달 하고 싶다면
마이페이지 -> 내정보 -> 프로필
이런식으로 props를 계속 전달해야해요 위와같이 3개정도만 파고 든다면 별 문제 되겠어? 라고 생각이 들겠지만 10개 15개로 넘어가는순간 props가 어디에서 왔는지 찾기가 어려워져요
그렇기에 전역 상태관리를 하는 GlobalState의 중요성이 나오는거죠

GlobalState

하나의 state가 여러 페이지에서 필요한 경우,
매번 props로 나눠주기 번거롭기 때문에
여러 컴포넌트에 사용되는 Global State가 필요함

Redux

장점
- 단방향으로 데이터가 흐른다. 즉 버그를 예측하기쉽다
- 내가 어떤 액션을 실행하였고 어떻게 데이터가 흐르는지 예측이 가능하여 디버깅이 매우 용이하다
- 기록이 남아서 이전 상태로도 되돌아 갈 수도 있다.
- 데이터의 중앙집권화이다.
단점
- 코드작성이 초기에는 복잡하다
- 아주 작은 기능이여도 몇 개의 파일들을 필수로 만들어야하여 코드량이 늘어난다.
- 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 함

Mobx

장점
- Redux에 비해 코드가 간결하고 쉽게 사용 할 수 있다.
- 불변성 유지 불필요
- store의 구성요소 및 역할 파악이 쉬워 가독성이 좋다
- 타 Library 필요성이 낮아짐
단점
- 레퍼런스 가뭄 (mobx v6 (mobx-react-lite) 레퍼런스가 적음)
- redux devtool처럼 다양한 기능 제공 X
- 버전 별 차이

SWR

서버 데이터를 앱 데이터처럼 사용
데이터 갱신을 위한 re-fetching을 간단히 구현할 수 있다.
fetch data가 캐시 후 앱 전역으로 공유되기 때문에 불필요한 request를 줄일 수 있다.

React-query

fetchPolicy가 내장된 REST-API용

캐싱
get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 )
데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
무한 스크롤 (Infinite Queries (opens new window))
비동기 과정을 선언적으로 관리할 수 있다.
react hook과 사용하는 구조가 비슷하다

Recoil

장점
- 캐싱
- 비동기문제를 깔끔하게 처리할 수 있다.
- 단순하다
- 리액트와 개발 방향성이 같다
- 선언적 프로그래밍
단점
- 안정성에 대한 걱정
- 실험적인 API들
- devtools의 부재
- 관련 오픈소스 생태계가 redux에 비해서 부족하다

주로 백엔드 state를 저장하는곳은
React-query , Apollo-Client

주로 프론트 state를 저장하는곳은
Recoil

둘다 하는거는
Redux

현재 트렌드는
Redux-toolkit , React-Query + Recoli , Apollo-Client + Recoli

Recoli 사용법

초기셋팅

//_app.tsx 파일 
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
	    ...
      	<Component />
     	...
    </RecoilRoot>
  );
}

// src/component/commons/stores
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

컴포넌트는 자신이 필요한 atom을 참조하고 자신이 참조하는 Atom에 변화가 있으면 atom을 참조하는 모든 컴포넌트에서 리렌더링 발생해요

import { useRecoilState } from "recoil";
import { textState } from "../../src/components/commons/stores";

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

recoil은 useRecoilState을 이용하여 사용해야해요

축약 작성법

const [text] = useRecoilState(textState);
데이터만만 사용할 경우에는 뒤에 set은 안해도 상관없음

const [, setText] = useRecoilState(textState);
set만 사용할 경우에는 앞에 콤마만 붙이고 사용해도 상관 없음