Recoil로 State 관리하기

Recoil은 업데이트된 state 부분만 리렌더를 해줍니다.

Setting

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

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

사용

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

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

아톰을 실제로 사용하기 위해서 useRecoil을 사용해야 합니다.

// 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>
  );
}

위와 같이 사용하면 textState를 참조하고 있는 모든 컴포넌트에서 리렌더가 일어납니다.

https://recoiljs.org/ko/docs/introduction/getting-started/Recoil은 업데이트된 state 부분만 리렌더를 해줍니다.

Setting

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

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

사용

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

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

아톰을 실제로 사용하기 위해서 useRecoil을 사용해야 합니다.

// 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>
  );
}

위와 같이 사용하면 textState를 참조하고 있는 모든 컴포넌트에서 리렌더가 일어납니다.

https://recoiljs.org/ko/docs/introduction/getting-started/