RECOIL - TIL

🚗Recoil이란

메인 컴포넌트에 있는 변수를 하위 컴포넌트가 쓰기 위해서는 상속을 받아야한다.

(*상속 아님 props)
멀리 떨어져있으면 갖다쓰기 불편하니까 RECOIL을 쓴다

🙃쓰는 법

아래처럼 RecoilRoot안에 쓰면 recoil의 state를 쓸 수 있다. 없으면 못씀

import React from "react";
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from "recoil"; // import!!! import하는것은 important하닌까 ~

function App() {
  return (
    <RecoilRoot>
      {" "}
      // 이렇게 감싸주어야한다.
      <CharacterCounter />
    </RecoilRoot>
  );
}

atom이 state랑 비슷한거다
atom을 쓰는 컴포넌트는 atom이 바뀔때 리렌더링된다. atom이 바뀌면 컴포넌트에 쓰인 값도 바뀜
key로 접근할 수 있다
default는 값이다

const textState = atom({
  key: "textState", // unique ID (다른 atoms/selectors을 구별하기 위해서)
  default: "", // default value (aka initial value)
});

기본 설정이다
useRecoilState 로 textState 변수에 접근할 수 있다

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

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

Selector

개념이 좀 헷갈린다
변경된 state에 대한 정보를 넘겨준다

const charCountState = selector({
  key: 'charCountState', 
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}