[TIL] ReactJS - Recoil, useRecoilValue, useSetRecoilState

오늘 공부한것 & 기억하고 싶은 내용

기본적으로 리액트는 컴포넌트 내부에서 상태를 관리하는 useState훅을 사용하는데, 컴포넌트 간에 상태를 공유할 때는 이 상태를 일일이 부모-자식 간으로 내려줄떄 props를 사용하는데, 이는 프로젝트가 커지면 굉장히 복잡해 질 수 있다.
이러한 번거로움을 줄이기 위해 나온게 Recoil이다.

Recoil이란?

• Recoil은 리액트 애플리케이션에서 상태를 관리하는 라이브러리
• Recoil을 사용하면 상태를 여러 컴포넌트에 걸쳐서 쉽게 사용할 수 있다.
• 예를 들어 로그인 여부, 시용자 이름, 장바구니 아이템 등이 이에 해당
• 특정 데이터를 전역 상태로 만들어서 부모-자식 관계 상관없이 모든 컴포넌트가 필요한 데이터를 쉽게 가져올 수 있다.
• 즉, Recoil을 쓰면 Props없이도 컴포넌트끼리 데이터를 공유할 수 있게 된다.
• Recoil의 상태값은 Atom이라고 부른다.
• 간단히 말해 아톰은 여러 컴포넌트에서 공유할 수 있는 데이터를 모아둔 곳이다. 바꾸고 싶은 상태값을 아톰에 넣어두면 됨.

// atoms.js
import { atom } from 'recoil';

export const userNameState = atom({
  key: 'userNameState', // 각 아톰을 구분하는 고유한 키값
  default: '', // 초기값
});

useRecoilValue와 useSetRecoilState란?

• useRecoilValue: 아톰의 현재 값을 읽을 때 사용
• useSetRecoilState: 아톰의 값을 설정(변경)할 때 사용

import { useRecoilValue } from 'recoil';
import { userNameState } from './atoms';

function DisplayUserName() {
  const userName = useRecoilValue(userNameState); // 아톰 값 읽기
  return <div>현재 로그인한 사용자: {userName}</div>;
}

• 다른 컴포넌트에서 이 값을 읽기만 할때는 useRecoilValue 사용
• 위 코드에서 userNameState의 현재 값(사용자 이름)을 읽어서 userName 변수에 저장하고, 화면에 보여주는 역할을 함

import { useSetRecoilState } from 'recoil';
import { userNameState } from './atoms';

function SetUserName() {
  const setUserName = useSetRecoilState(userNameState); // 아톰 값 변경

  const handleChange = (event) => {
    setUserName(event.target.value); // 아톰 값 업데이트
  };

  return (
    <input
      type="text"
      placeholder="이름 입력"
      onChange={handleChange}
    />
  );
}

• userNameState를 업데이트하기 위해 useSetRecoilState 사용

배운점 & 느낀점

리액트 useState와 Props만 주구장창 배우다가 좀 더 끈기를 가지고 공부하다보니
이런 새로운 신개념도 알게되었다!!
점점 더 코드가 줄어가고 있다. 그만큼 축약된것이니 개념정리를 더 잘해두고 꾸준히 읽어봐야겠다.