Recoil & state in Class Component

• Recoil에 기초 개념을 이해하기 위해 이런 식으로 이해하면 좋지 않을까 정리해 보았다.
  
  

1. Class Component

• class Component 에서는 this.state{}라는 객체를 이용하여 컴포넌트에서 state를 관리한다.
• state 가 필요한 하위 컴포넌트에게 props로 state를 전달해준다.
• this.state{} 내에서는 state 각각을 key : value 형태로 관리한다.

// in react class Component
class ComponentExample extends React.Component{
this.state = {
	increaseNum : 0,
	decreaseNum : 0,
	...
}
...
}

2. Recoil

• Recoil에서 상태관리하는 모습을 보면 Class Component와 유사한 것 같다.

2-1. RecoilRoot

• Recoil에서는 RecoilRoot로 감싸준 즉 **RecoilRoot** 컴포넌트의 하위 컴포넌트에게 Recoil이 관리하는 state를 사용할 수 있게 해준다.
• RecoilRoot 컴포넌트에서 this.state{} 객체와 같이 state를 종합적으로 관리하는 무언가를 가지고 있고 이를 하위 컴포넌트에 제공해준다고 생각해보자!

  import styles from './Routes.module.scss'
  import Movie from './Movie'
  import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil'
  
  const App = () => {
    return (
      <RecoilRoot>
          <Movie />
      </RecoilRoot>
    )
  }
  
  export default App

  📢 이하 내용에선 recoil이 state를 종합적으로 관리하는 무언가를 recoil의 this.state{}라고 설명하겠다.

2-2. Atom

• this.state{} 객체 내에 들어가는 state 요소들처럼 관리하는 state 요소들을 key : value 값으로 atom이라는 이름을 사용하여 각각의 state 요소들을 관리한다.

• atom() 함수을 이용해서 recoil의 this.state{}에 state 요소를 추가해줄 수 있다.

• atom()의 반환값으로 RecoilState라는 객체를 반환받는데 이 값을 Hook과 같이 사용하여 Recoil에서 관리하는 state요소 즉 atom에 접근하여 읽기 및 수정을 할 수 있다.
  
  

  🚫 Recoil에서 관리하는 state 요소(Atom) 접근하기

  아래의 코드 처럼 atom() 함수를 사용하면 recoil이 관리하는 state에 state 요소(atom)를 추가할 수 있고 이때 반환된 값(RecoilState)을 Hook과 함께 이용하여 해당 state요소(atom) 정보 및 수정 함수(setFunction)를 recoil에게 받아올 수 있다.

  const textState = atom({
  	key: 'textState',
  	default: '',
  })

  const [textState, setTextState] = useRecoilState(textState);

2-3. useRecoilState, useRecoilValue, useSetRecoilState

• Recoil의 this.state{}에서 관리되는 state(=atom)들에 접근할 수 있게 만들어주는 함수들
• 이와 관련된 개념에서는 useState의 Hook과 개념이 동일하여 정말 유용하고 이해하기 쉽게 만들었다는 느낌을 받았다..
• useRecoilState
  • useState와 같은 형태로 atom 하나에 관한 값을 받아올 수 있다.
  • return 값으로 {value, setFunction} 형태를 가진다.
• useRecoilValue
  • useRecoilState에서 return 값으로 {value, setFunction}를 반환받았다면 useRecoilValue에서는 이 중 value 값만 받아오는 함수이다.
• useSetRecoilState
  • useSetRecoilState에서는 {value, setFunction} 중 setFunction을 받아오는 함수이다.
• 예시

  import {nameState} from './someplace' // atom()의 반환 값을 관리하는 파일
  
  // useRecoilState : 현재 recoil에서 관리하는 nameState
  const NameInput = () => {
    const [name, setName] = useRecoilState(nameState);
    const onChange = (event) => {
     setName(event.target.value);
    };
    return <>
     <input type="text" value={name} onChange={onChange} />
     <div>Name: {name}</div>
    </>;
  }
  // useRecoilValue
  const SomeOtherComponentWithName = () => {
    const name = useRecoilValue(nameState);
    return <div>{name}</div>;
  }
  // useSetRecoilState  
  const SomeOtherComponentThatSetsName = () => {
    const setName = useSetRecoilState(nameState);
    return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
  }
  

3. Class Component와 Recoil 코드 비교

3-1. in Class Component

// in class component
this.state = {                                        
	increaseNum : 0,         
	decreaseNum : 0,         
}                          

3-2. in Recoil

• 위 코드를 recoil 형식으로 생각해보면 아래처럼 표현할 수 있을 것 같다.

// in recoil
recoil.state = {                                       // 1. recoil이 state를 종합적으로 관리, RecoilRoot로 감싼 영역(하위 컴포넌트)에 대해 this.state를 제공해주는 느낌.
	increaseNum : {key : 'increaseNum', default : 0}   // 2. recoil에서 관리하는 state요소 하나하나를 atom 이라는 이름을 사용하여 각각 관리한다.
	decreaseNum : {key : 'decreaseNum ', default : 0}  // 3. recoil에서 관리하는 state요소 하나하나를 atom() 함수를 이용해서 recoil.state에 추가한다.
}                                                      // 4. atom 함수의 반환값과 useRecoilState 및 useRecoilValue, useSetRecoilState를 이용하여 recoil.state의 state요소 값을 받아오고 수정할 수 있다.

References

https://ui.toast.com/weekly-pick/ko_20200616

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

https://recoiljs.org/ko/docs/api-reference/core/atom/