TIL. 44 Recoil로 부모 컴포넌트의 상태 변경하기

💡 Recoil

• React는 Angular, Vue.js와는 다르게 기본적으로 부모에서 자식 방향으로만 state를 props로 전달할 수 있는 단방향 라이브러리이다.

• 물론, 자식에서 부모의 state를 바꿀 수 있는 방법이 존재하지만 규모가 커질수록 관리가 어렵다는 단점이 있다.

• 위 내용을 React의 동작을 최대한 유지하면서 보완하는 목적으로 페이스북에서 개발한 라이브러리이다.

패키지 설치

npm install recoil

기본 형태

// index.js

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

// atom.js

export const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
})

• 적용할 컴포넌트를 RecoilRoot로 감싸준다.

• 그리고 atom.js를 src 폴더 경로에 생성 후 초기값 세팅을 해준다.

부모 state 변경하기

// App.js

const App = () => {
  const fontSize = useRecoilValue(fontSizeState);

  return (
    <>
      <div style={{ fontSize: `${fontSize}px` }}>부모 컴포넌트 데이터</div>
      <Another />
    </>
  );
}

// Another.js

const Another = () => {
  const setFontSize = useSetRecoilState(fontSizeState);

  const handleSize = useCallback((e) => {

    e.target.value === "up" ?
    setFontSize(prevSize => prevSize + 1) :
    setFontSize(prevSize => prevSize - 1)

  }, [setFontSize])

  return (
    <div onClick={handleSize}>
      <button value="up">커지는 버튼</button>
      <button value="down">작아지는 버튼</button>
    </div>
  );
}

• App.js에서 useState와 같은 형태로 atom.js에 설정한 Recoil State를 선언해주고, Another.js에서 이벤트를 발생시켜 App.js의 상태를 변경한다.

• App.js의 경우, 따로 설정하지 않고 값만 불러오는 상황이라 useRecoilValue를 사용했다.

• setter만 필요할 때엔, useSetRecoilState를 사용할 수 있다.