글로벌 스테이트와 Context-API & Recoil

huni_·2022년 7월 6일

React

목록 보기

32/57

코딩을 하다가 이러한 상황이 생기신 적이 있으신가요?

부모가 가지고 있는 State 데이터를 최하위에 있는 자식 컴포넌트에 props로 넘겨주려고 하려면

중간 중간에 있는 모든 자식 컴포넌트에게 넘겨줘야 합니다.

최하위에 있는 컴포넌트로 State를 넘겨줄 뿐인데

그 중간 과정이 너무 귀찮고 번거로운 과정입니다.

Context는, 이러한 과정 없이 가장 최상위에서 모든 State 들을 관리하며

어떠한 컴포넌트든 Context 를 이용해 해당되는 State를 가져올 수 있습니다.

중간 중간마다 있는 자식 컴포넌트들에게도 props 를 전달하지 않고

바로 최하위 컴포넌트로 State 를 전달합니다.

context-api

Context를 사용하기 위해선 기본적인 설정이 필요합니다.

먼저, 최상위 컴포넌트 (app.tsx) 에서 모든 컴포넌트로 전달해줄 State 를 담아주는

Context 를 설정해보겠습니다.

Context 는 React 에서 제공하는 createContext 를 사용해서 생성할 수 있습니다.

Context 데이터를 사용할 변수에 createContext 함수의 인자값으로

관리할 State 들을 객체 형태로 담아줍니다.

State를 설정했으니 State 값을 변경할 수 있는 set 함수도 함께 설정할 수 있겠죠?

여기까지 Context State 값의 타입을 설정했는데, 아직 State 값이 만들어진 것은 아닙니다.

useState를 이용해 설정한 State 값들을 만들어줍니다.

방금 생성한 State 값들이 바로 위에서 설정했었던

Context 의 State 객체에 담겨져 하위 컴포넌트로 출력되는 State 가 됩니다.

❗ 반드시, Context 에 설정된 키 이름과 State 로 생성한 키 이름을 동일하게 설정해주세요!

자, 이제 그럼 생성한 State 들을

하위 컴포넌트로 뿌려주기 위한 작업을 추가해줍니다.

app.tsx 가 페이지를 그려내는 부분,

즉 return 하는 부분에서 전체 페이지들을 Context 를 감싸줍니다.

이때, Context의 State 값을 제공한다는 의미로 Provider 기능을 사용할 수 있고,

value 값으로 전체 페이지로 전달할 State 값들을 넣어줍니다.

이제부터, value 객체에 들어 있는 모든 State 값들은

모든 컴포넌트에서 가져올 수 있는 전역 State 값을 가지게 됩니다.

그럼 한번, 컴포넌트에서

Context 안에 담겨있는 State 값을 가져와 볼까요?

Context API 를 사용하려고 하는 페이지에서

다음과 같이 불러올 수 있습니다.

컴포넌트 안에서는 useContext 기능을 이용해서

최상위에 설정된 Context의 State 값을 비구조화 할당으로 가져올 수 있습니다.

이렇게 해서 가져온 name State 값을 화면에 출력해보면

Context에 설정된 name 값이 잘 출력되는 걸 확인할 수 있습니다.

Recoil

우리가 위에서 사용한 context-api에는 한가지 단점이 있습니다.

바로 provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더가 일어나게 됩니다.

즉, 불필요한 렌더링이 일어난다는 것 입니다. 이를 보완하여 나온 것이 Recoil 입니다.

Recoil은 단점을 보완해서 나온 만큼 업데이트된 state 부분만 리렌더를 해줍니다. 또한 context-api보다 사용법이 간단합니다!

Recoil 설치

Recoil_github

npm 사용자 : 터미널에 npm install recoil 을 입력합니다.
yarn 사용자 : 터미널에 yarn add recoil 을 입력합니다.

Recoil 세팅

세팅은 늘 그렇듯 app.tsx 파일에서 하시면 됩니다.

//app.tsx 파일
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
		//RecoilRoot로 모든 컴포넌트를 묶어주세요
     	<Component />
    </RecoilRoot>
  );
}

Recoil 사용

Recoil에서는 Atom으로 state의 일부를 보여줍니다.

그리고 컴포넌트들은 자신이 필요한 Atom을 참조하고 있습니다. 따라서 자신이 참조하고 있는 Atom에 변화가 있으면,해당 atom을 참조하는 모든 컴포넌트에서 리렌더링이 일어납니다.

// Atom**
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

💡 Atom은 꼭 파일로 따로 빼야하나요?

→ 아니요, 필수는 아닙니다.
다만, 파일을 분리하게 되면 반드시 export를 해주셔야 합니다.

위의 아톰을 실제로 사용하기 위해선 useRecoilState를 사용해야 하는데요, 사용법은 useState와 비슷해 친숙해지기까지 오래 걸리지 않으실 것 입니다.

// TextInput 컴포넌트
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>
  );
}