[React] Recoil 상태 관리 라이브러리

📚Recoil 이란❓

리액트 애플리케이션을 위한 상태 관리 라이브러리❗

깃허브에 14,000개 이상의 별이 있는 오픈 소스 상태 관리 라이브러리이며
페이스북의 소프트웨어 엔지니어인 Dave McCabe가 발명했음🤓
React 애플리케이션의 모든 구성 요소가 상태를
쉽게 공유할 수 있도록 전역 상태를 제공하며 Redex에 비해 최소화됨

👍리코일의 장점

• 리덕스 사용할 때처럼 초반 설정을 위한
  복잡한 *BoilerPlate 코드를 작성하는 부분이 최소화✨

  Boilerplate : 기본 틀처럼 반복적으로 작성해야 하는 코드
  

✍Redex 에선 초반에 이런 코드들을 많이 작성

// store.js
// 리덕스에서 상태 관리를 위한 스토어를 생성하는 함수 import
import { createStore } from 'redux';
// 리덕스에서 사용할 기본 리듀서 정의 (아무 작업 안 함)
const reducer = (state = {}, action) => state; 
// 리듀서를 이용해 스토어 생성
const store = createStore(reducer); 

// 스토어를 다른 파일에서 사용할 수 있도록 export
export default store; 

// App.js
// 리덕스 스토어를 리액트 컴포넌트에 제공하기 위한 Provider import
import { Provider } from 'react-redux'; 
import store from './store'; // 만들어 둔 스토어를 import

function App() {
  return (
    // Provider를 통해 하위 컴포넌트에 스토어를 공유
    <Provider store={store}>
      <YourComponent /> {/* 실제로 동작할 컴포넌트 */}
    </Provider>
  );
}

// App 컴포넌트를 export
export default App; 

⬇
Recoil

// App.js
// 리코일 상태를 관리하기 위한 RecoilRoot import
import { RecoilRoot } from 'recoil'; 

function App() {
  return (
    // RecoilRoot로 하위 컴포넌트에 리코일 상태를 공유
    <RecoilRoot>
      <YourComponent /> {/* 실제로 동작할 컴포넌트 */}
    </RecoilRoot>
  );
}

// App 컴포넌트를 export
export default App; 

• 비록 리액트 공식 상태 관리 라이브러리 아니지만
  페이스북에서 만들어진 것이기에 리액트와 호환 잘되도록 만들어짐😎

---

👩‍💻리코일 이용한 간단한 프로젝트

1️⃣폴더 생성하기

2️⃣React 설치하기📥

리액트 앱 만들 때 Vite 사용해도 되고 create-react-app 만들어도 됨

3️⃣Recoil 설치하기📥

npm install recoil

...

▫ src>index.js

context or Redex 사용할 때도 가장 👩‍🦱부모 컴포넌트( App )를 프로바이더로 감싸줬었음

✅리코일도 마찬가진데 이름이 다름➡RecoilRoot로 👩‍🦱부모 감싸주면 됨

App.js로 와서 div 태그 안에 모조리 지우고 npm run start로 실행해보자❗

⬇

간단하게 input을 넣어두고 String의 길이가 몇인지 보여주는 컴포넌트를 만들 것

👉 텍스트 타이핑하는 input 컴포넌트
👉 얼마나 타이핑 했는지 보여주는 카운트 컴포넌트

rafce 치고 함수형 컴포넌트 자동으로 나오게 하기

이것도 똑같이 해주고

import TextInput from './components/TextInput';
import CharacterCount from './components/CharacterCount';
임포트 해주고 컴포넌트 넣어주기

⬇

▫ src>components>TextInput.js

input 안에 작성한 텍스트가 Echo: 여기에 반영되게 하려면❓

원래는 이렇게 하겠지만

지금은 리코일로 구현해 볼 것

Atom 이란 걸 만들거임
👉 state( 상태 )에 일부를 나타냄
⭐ 어떠한 컴포넌트에서든 읽고 쓸 수 있음

만약에 TextInput 컴포넌트 안에 있는 text를

다른 컴포넌트인 CharacterCount 에서 쓰고 싶으면 어떻게 하지❓

그렇게 하고 싶으면 이렇게 부모 컴포넌트로 state를 올려서 해야됨
👉 state는 자녀 컴포넌트 밖에 못 내리기 때문❗ ( Atom은 영향 받지❌ )

리코일에서 제공해주는 '아톰'을 이용함🌫🐱‍🏍

import { atom } from 'recoil';

🔑atom 안에 유니크한 값을 줘야함

state 에서 저부분이 디폴트 값임

🎆이렇게 하면 아톰을 생성한 것

⭐아톰의 특징 : 어떠한 컴포넌트에서든 읽고 쓸 수 있음

🔄textState 값이 변경 되면
textState를 사용하고 있는 컴포넌트 모두 리렌더링 됨💻

컴포넌트가 리렌더링 되게 하려면❓➡state가 변경이 돼야 함

🌫🐱‍🏍아톰은 어떠한 컴포넌트에서든 사용 가능하니까 export로 내보내줘야함

App.js 에서 만든걸 TextInput.js 에서 사용하려면

아까 만든 textState를 useRecoilState 안에 넣어주면 됨🙆‍♀️

state처럼 이것도 제공을 해주는데 text가 뭘까❓

text는 현재 ' ' 빈 String임
지금 이걸 업데이트한 상태가 아니기에 기본 값이 ' ' 이게 되는 것

setText는 아톰의 값을( text ) 업데이트 해주는 함수인 것

⬇

👀

---

⌨TextInput 에서 타이핑 할 때마다
String의 length를 CharacterCount 에서 보여주게 하자

그럴려면 textState.length를 보여주고 싶은데 어떻게 하냐면❓

리코일에서 제공해주는 'Selector' 라는 게 있음❗
👉 얘가 주로 하는 일은 textState가 변경되면 변경 되는 거에 따라서
이 안에서 어떠한 원하는 로직을 작성한 담에 리턴을 해줄 수 있음🔁

🔄그리고 Selector 에서 리턴하는 값도 이 값이 바뀌면
Selector 사용하고 있는 컴포넌트도 모두 리렌더링 됨💻

간단히 말해, Selector는 textState의 값이
변경될 때마다 어떠한 로직을 처리하는 함수🔥

▫ src>App.js

🔑키는 유니크 하게만 주면 됨

get(textState) 넣어주면 textState가 바뀔 때마다 이거의 값이 text로 들어가는 것

또 타이핑 치면 그 값이 text로 들어가는 거임

🤓atom은 언제 사용하고 selector는 언제 사용하는 걸까❓

▶atom : 어떠한 state를 여러 컴포넌트에서 공유해서 사용할 때
▶selector : 어떠한 값이 변경이 될 때 의존해서 뭔가를 해줄 때

이것도 마찬가지로 export로 내보내기🥏

▫ src>components>CharacterCount.js

🔁App.js 안에 있는 charCounState 함수가 리턴하는 값을
CharacterCount.js 컴포넌트에서 보여줘야함👀

그러기 위해 useRecoilValue( ) 사용하면 됨❗

⬇

타이핑 한 문자열의 갯수를 실시간으로 잘 가져오는 걸 확인할 수 있음👀