Recoil을 알아보자

상태 관리 라이브러리의 등장 배경

 

  다음과 같은 상황을 가정해 보자

// src/App.tsx 

import React from 'react';
import Top from './Top';

function App() {
  return <Top />;
}
export default App;

 

App.tsx에서 Top.tsx를 랜더링 하고

// src/Top.tsx 
// Middle 컴포넌트를 자식으로 가지고 BottomText를 출력해야하는 컴포넌트

import React from 'react';
import Middle from './Middle';

function Top() {
  return (
    <>
      <Middle />
      Top : {BottomText}
    </>
  );
}

export default Top;

 

Top.tsx에서는 Middle.tsx를 랜더링 한다.

// src/Middle.tsx 

import React from 'react';
import Bottom from './Bottom';

function Middle() {
  return (
    <>
      <Bottom />
    </>
  );
}

export default Middle;

 

Middle.tsx에서는 다음과 같은 Bottom.tsx를 랜더링 한다.

// src/Bottom.tsx

import React, { useState } from 'react';

function Bottom() {
  const [text, setText] = useState('');

  const onChange = (e: any) => {
    setText(e.target.value);
  };

  return <input value={text} onChange={onChange} />;
}

export default Bottom;

 

 Bottom 컴포넌트의 Text를 Top 컴포넌트에서 사용하기 위해서 다음과 같은 방법을 사용할 수 있다.

// src/Top.tsx

import React, { useState } from 'react';
import Middle from './Middle';

function Top() {
  const [BottomText, setBottomText] = useState('');
  return (
    <>
      <Middle setBottomText={setBottomText} />
      Top : {BottomText}
    </>
  );
}

export default Top;

// src/Middle.tsx

import React from 'react';
import Bottom from './Bottom';

function Middle({ setBottomText }: any) {
  return (
    <>
      <Bottom setBottomText={setBottomText} />
    </>
  );
}

export default Middle;

// src/Bottom.tsx

import React, { useState } from 'react';

function Bottom({ setBottomText }: any) {
  const [text, setText] = useState('');

  const onChange = (e: any) => {
    setText(e.target.value);
    setBottomText(text);
  };

  return <input value={text} onChange={onChange} />;
}

export default Bottom;

 

Top.tsx의 set함수를 Middle.tsx로, Middle.tsx에서 Bottom.tsx로 전달하여 text값을 설정해 주었다. 

하지만 이것이 Top, Middle, Bottom 3개의 컴포넌트에서 끝나지 않고, 수십수백 개의 컴포넌트를 거쳐야 한다면 어떻게 될까?

 

Recoil을 사용해 보자

 

npm install recoil

yarn add recoil

 

 recoil을 적용하고자 하는 최상위 컴포넌트를 RecoilRoot로 감싼다.

// src/App.tsx

import React from 'react';
import { RecoilRoot } from 'recoil';
import Top from './Top';

function App() {
  return (
    <RecoilRoot>
      <Top />
    </RecoilRoot>
  );
}
export default App;