[React Recoil] 공식문서 톺아보기①

네모·2023년 5월 6일
0
post-thumbnail

출처

https://recoiljs.org/ko/docs/introduction/motivation


1. Recoil 주요 개념🎫

1-1. 상태 단위 Atoms

Atoms은 상태의 단위로, 업데이트와 구독할 수 있다. 각각의 atom이 업데이트 될 때마다, 이를 구독한 컴포넌트들은 리렌더링된다. atom을 구독한 모든 컴포넌트들은 그 상태를 공유한다. useRecoilState라는 훅을 통해, 컴포넌트에서 atom을 참조하고 사용할 수 있다. React의 useState와 비슷하지만, state가 컴포넌트 간 공유할 수 있다는 점에서 차이가 있다.

//atoms.ts
const fontSizeState = atom({
	key : 'fontSizeState',
  	default : 12,
})


//FontButton.tsx
import {useRecoilState} from 'recoil';

function FontButton(){
	const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  	return (
    	<button onClick={()=> setFontSize(size => size+1) style={{fontSize}}}>
      		클릭하면 폰트 사이즈 1px 증가함
        </button>
    );
}

1-2. 순수 함수 Selectors

  • Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수다. 먼저 순수 함수란 무엇일까? 모던 자바스크립트 딥다이브 12장 함수에서 설명한 순수 함수의 개념에 대해 살펴보자.
  • 순수 함수란 함수형 프로그래밍에서 어떤 외부 상태에 의존하지 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 말한다. 즉, 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수다. 오로지 매개변수를 기반으로 인수에 의존해 값을 생성한다. 그런데, 이는 상수와 혼동되어선 안된다. 인수를 전달받지 않는 순수 함수는 언제나 동일한 값을 반환하지만, 그 자체로는 상수와 같고, 따라서 큰 의미를 지니지 않기 때문이다. 의미있는 상황에서의 순수 함수란 최소 하나 이상의 인수를 전달 받아야함이 전제로 깔려 있다. 그렇다면 우리가 순수 함수에 주목해야 하는 이유는 무엇일까?
  • 바로 비순수 함수를 사용하면 상태 변화를 추적하기 어려워지기 때문이다. 그렇기에 오직 매개변수에 의존성을 갖고, 동일한 값을 뱉는 순수 함수를 사용하는 것이 내 손 안에 state를 관리하기 용이하다.

Selector도 atom과 마찬가지로 컴포넌트에서 구독하고, selector가 변경됨에 따라 리렌더링이 일어난다. 바로 예시 코드를 보자.

//atoms.ts (현재 fontSizeState atom과 같은 파일에 있다!)
const fontSizeLabelState = selector({
	key : 'fontSizeLabelState',
  	get : ({get}) => {
    	const fontSize = get(fontSizeState);
      	const unit = 'px';
    }
  
  	return `${fontSize}${unit}`;
	//fontSizeState라는 매개변수에만 의존하며 이에 따라 언제나 동일한 값을 생성한다.
})

get 프로퍼티는 오로지 매개변수 fontSizeState를 전달받아 계산되는 함수다. 이를 atom과 selector 사이에 종속 관계가 자동으로 생성된다고 하며, fontSizeState라는 하나의 atom에 의존성을 갖는다고 표현한다.

profile
네모난 개발자

0개의 댓글