원글 페이지 : 바로가기
https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통 5ffthewall.tistory.com 전 글에서 말했다 싶이 context API로 상태 관리를 했을 때 문제점에 대한 해결 방안으로 1. useMemo 사용하기 2. Dispatch provider와 Dispatch consumer 분리 가 있었다. 하지만 내부의 state가 갱신되면 하위 컴포넌트들이 전부 렌더링되는 리액트 컴포넌트의 룰을 벗어나지 않는 텍스트의 본질적인 의미는 변하지 않기 때문에! 다른 상태관리 도구를 써보고자 한다. 기존에 쓰던 상태 관리 도구인 context API를 recoil로 바꾸는 과정을 공부하고 기록하고자 한다. recoil이란? Recoil은 상태 관리를 위한 상태 관리 라이브러리 중 하나이다. Recoil은 페이스북에서 개발된 라이브러리로, React 애플리케이션의 전역 상태를 관리하기 위한 간단하고 유연한 방법을 제공한다. https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org recoil 설치 npm install recoil
yarn add recoil 둘 중 쓰는 걸로 모듈을 설치해준다 RecoilRoot Recoil에는 상태가 미치는 범위를 지정하는 RecoilRoot가 필요하다. import React from ‘react’;
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from ‘recoil’;
function App() {
return (
);
} context와 비슷하게 부모에서
key: ‘textState’, // unique ID (with respect to other atoms/selectors)
default: ”, // default value (aka initial value)
}); 기본적으로 전달해주는 값은 key, default 두 가지이다. – key : 해당 상태의 고유 키, 문자열! – default : 기본 값 atom으로 정의된 변수를 사용하는 컴포넌트는 암묵적으로 atom을 구독하기 때문에 atom에 변화가 있으면 atom을 구독하는 모든 컴포넌트들이 리렌더링된다. 하지만 모든 구독 컴포넌트가 리렌더링이 되는 것은 아님! -> 밑에서 설명 Selector atom에서 불가능한 비동기 처리와 복잡한 로직들을 구현할 수 있다. 파생된 상태의 일부를 나타내는 것으로 파생된 상태와는 차이가 있다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다. state를 가져와서(get) 다른 값으로 변경(set) 하거나 여러 state를 가져와서 조합하거나 Rest API와 조합하여 서버데이터를 관리 할수도 있다. const charCountState = selector({
key: ‘charCountState’, // unique ID (with respect to other atoms/selectors)
get: ({get}) => {
const text = get(textState);
return text.length;
},
}); 기본적으로 전달해주는 값은 key, get 두 가지이다. 추가로 set도 있음! – key : atom의 키와 동일! – get : 파생 된 상태를 반환 get(textState) 이런 식으로 textState를 get하고 있으면 textState가 바뀔 때 마다 새로운 값을 리턴해줌 get()은 여러 번 사용이 가능하고 그 중 하나라도 바뀌면 리렌더링 됨! set: ({set, get}, newCount)=>{
return set(countState, newCount + 10)
} – set : 쓰기 가능한 상태를 반환 set없이 제공된 get은 read-only한 상태! set은 selector의 값을 수정하는 게 아니라 수정 가능한 atom의 값을 바꿔준다 set: ({set, get}, newCount)=>{…} set 안에서의 get은 구독(리렌더링 이런 거 아님)하지 않고 단순히 atom이나 selector의 값을 찾는데 사용한다. return set(countState, newCount + 10) set()은 recoil의 상태와 바뀔 값 총 두 가지의 매개변수를 반환한다. 비동기 Selector recoil의 selector은 자체적으로 비동기를 지원한다. 그냥 get 함수를 async로 선언하면 된다! const charCountState = selector({
key: ‘charCountState’, // unique ID (with respect to other atoms/selectors)
get: async ({get}) => {
const text = get(textState);
const result = await tempFunction(text);
return result.length;
},
}); atom을 사용할 때 비동기 통신을 하는게 아니라 seletor 안에서 get함수를 async로 선언해서 비동기 통신을 할 수 있다. 참고한 글 https://velog.io/@2ast/React-Recoil-selector%EB%A1%9C-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85-%EC%88%98%ED%96%89%ED%95%98%EA%B8%B0 React) Recoil selector로 비동기 작업 수행하기 recoil의 selector는 그 자체적으로 비동기를 지원한다. 그래서 이참에 이전에 만들어본 환전 시스템을 실제 api를 호출하여 환율 정보를 가져와 반영하도록 예제를 만들어볼 예정이다. 비동기로 데 velog.io recoil hook useRecoilState() 컴포넌트가 atom 또는 selector의 값을 읽고 쓸 때 사용한다. const [text, setText] = useRecoilState(textState); selector에 get만 있는 경우는 읽기 전용이기 때문에 사용 불가하다. set도 있어야 사용 가능! 여기서 상태와 값 각각 하나만 필요한 경우는 useRecoilValue과 useSetRecoilState를 써준다! useRecoilValue() / useSetRecoilState() const count = useRecoilValue(charCountState); recoil의 상태 값을 반환한다 읽기 기능만 쓰고 싶을 때 사용! const setCount = useSetRecoilState(charCountState); recoil의 상태를 업데이트 하기 위한 setter 함수를 반환한다 쓰기 기능만 쓰고 싶을 때 사용! useResetRecoilState() atom이나 selector의 값을 초기화 할 때 사용한다. const resetCount = useResetRecoilState(charCountState);
…
atom은 이런 식으로 초기화 가능! const charCountState = selector({
key: ‘charCountState’,
get: ({get}) => {
const text = get(textState);
return text.length;
},
set: ({set, get}, newCount)=>{
return set(
countState,
// newCount + 10
// 기존 코드
newCount instanceof DefaultValue ? newCount : newCount + 10
)
}
}); selector의 set에서 조건 처리를 해주면서 초기화 한다! 그냥 set을 하면 +10이 되지만 DefaultValue가 오면 초기값을 반환하도록 한다 -> 사실 조건 처리 꼭 해야하는지 모르겠다… 자주 사용하는 개념들만 정리를 했다! 다음엔 recoil을 활용한 간단 예제를 작성해보고 내 코드에 까지 적용해보고자 한다. 이어지는 다음 글 >> https://5ffthewall.tistory.com/73 [React] 리액트 recoil 예제 만들어 사용해보기 이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewa 5ffthewall.tistory.com