<div id="readability-page-1" class="page"><cite>Suhyeon Lee</cite>
 2023. 5. 14. 15:41
 <div>
 프로젝트에서 Recoil을 사용하여 상태관리를 하고자 해서 Recoil에 대해 알아보며 정리한 글이다.
<h2>설치</h2>
<pre><code>yarn add recoil</code></pre><h2>RecoilRoot</h2>
리코일 state를 사용하는 컴포넌트들은 를 필요로 한다. 를 사용하는 가장 좋은곳은 root component이다.
<pre><code>// index.tsx
import ReactDOM from 'react-dom';
import App from './App';
import 'styles/reset.scss';
import 'styles/global.scss';
import { RecoilRoot } from 'recoil';

ReactDOM.render(
 &lt;RecoilRoot&gt;
 &lt;App /&gt;
 &lt;/RecoilRoot&gt;,
 document.getElementById('root'),
);</code></pre><h2>Atom</h2>
Atoms는 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
atoms.tsx 파일을 생성하고 Recoil의 atom function 을 사용하여 필요한 데이터를 설정한다.
atom 은 두 가지를 요구하는데 첫 번째는 key(고유값)로 unique ID 이고 두 번째는 default value(기본값) 이다.
여러 컴포넌트에서 atom을 구독하고 있다면, 상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 된다.
현재 진행하는 프로젝트에서는 atom에 선택된 노드의 id, isActive, name값을 저장하려고 했으므로 다음과 같이 초기값을 설정했다.
<pre><code>// state.tsx
import { atom } from 'recoil';
import { NodeObject } from 'utils/types';

const initalNodeInfo: NodeObject = { id: 0, isActive: false, name: '' };

export const nodeAtom = atom({
 key: 'nodeAtom',
 default: initalNodeInfo,
});</code></pre>이렇게 정의한 atom은 useRecoilState, useRecoilValue, useSetRecoilState 의 훅으로 사용할 수 있다.
useRecoilState : useState()와 같이 배열의 첫 번째요소가 상태, 두 번째 요소가 상태를 업데이트 하는 함수 반환, atom 을 읽고 쓰게 하기 위해서 사용
<pre><code>const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);</code></pre>useRecoilValue : 상태 값만 필요한 경우에 사용
<pre><code>const NodeInfo = useRecoilValue(nodeAtom);</code></pre>useSetRecoilState : 상태를 업데이트 하는 함수만 필요한 경우 사용, 컴포넌트가 atom 을 쓰게 하기 위해서 사용
<pre><code>const setNodeInfo = useSetRecoilState(nodeAtom);</code></pre>useResetRecoilState : 인자로 받아온 atom의 state를 default값으로 reset
<pre><code>const resetNodeInfo = useResetRecoilState(nodeAtom);</code></pre>이렇게 hook을 이용해서 바꾼 atom 값은 useRecoilValue() 을 사용해서 불러오면 된다.
<pre><code>const selectedNodeInfo = useRecoilValue(nodeAtom);</code></pre><hr>
<pre><code>nk.js:41 Uncaught TypeError: Cannot assign to read only property 'vx' of object '#&lt;Object&gt;’</code></pre>노드를 클릭하면 useRecoilState를 이용하여 Atom값을 변경한 후 저장하려고 했으나 다음과 같은 오류가 발생했다. 읽기 객체를 변형해서 생긴 오류로 보였다.
<pre><code>const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);

const handleClick = (node: NodeObject) =&gt; {
 fgRef.current?.centerAt(node.x, node.y, 1000);
 setModalIsOpen(true);
 setNodeInfo(node);
};</code></pre>위의 코드가 기존 코드이다.
다음과 같이 필요한 값만 넣는 방법으로 바꿔서 해결했다.
<pre><code> const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);

 const handleClick = (node: NodeObject) =&gt; {
 fgRef.current?.centerAt(node.x, node.y, 1000);
 setModalIsOpen(true);
 setNodeInfo({ id: node.id, isActive: node.isActive, name: node.name });
 };</code></pre><hr>
현재 프로젝트에서는 atom만을 사용하여 적용했기 때문에, 밑의 selector예제는 다른 사람들이 작성한 예제를 가져왔다.
추후 비동기 처리를 selector로 할 경우에 따로 정리를 할 예정이다.
<hr>
<h2>Selector</h2>
atom 만을 사용해서는 비동기 처리를 할 수 없다. selector를 이용해서 비동기 처리를 한 번에 처리할 수 있다.
Selectors는 devived state 를 나타냅니다. devived state 란 state 를 입력 받아서 그걸 변형해 반환하는 순수 함수를 거쳐 반환된 값을 말한다.
<ul>
<li>Selector의 타입</li>
</ul>
<pre><code>key : selector를 구분할 수 있는 유일한 id, 즉 key 값을 의미합니다.
get : 에는 derived state 를 return 하는 곳 입니다. 예시 코드에서는 api call을 통해 받아온 data를 return 하게 됩니다. (해당 selector가 갖고 있습니다.)</code></pre><pre><code>export const cookieState = atom({
 key: 'cookieState',
 default: []
});

export const getCookieSelector = selector({
 key: "cookie/get",
 get: async ({ get }) =&gt; {
 try{
 const { data } = await client.get('/cookies');
 return data.data;
 } catch (err) {
 throw err;
 }
 },
 set: ({set}, newValue)=&gt; {
 set(cookieState, newValue)
 }
});</code></pre>다음과 같이 비동기 로직을 selector에선 한 번에 처리 할 수 있습니다. 주의하셔야 할 점은, selector는 순수함수 여야 한다는 것이다.
순수함수란, 같은 입력이 들어오면, 해당 입력에 대한 출력은 항상 같은 함수라는 뜻을 가지고 있다.
또한 selector는 read-only 한 RecoilValueReadOnly 객체로서 return 값 만을 가질 수 있고 값을 set 할 순 없는 특징을 가지고 있다.
selector는 결국 다른 selector나 atom의 값을 get해올 수 있고, get해온 값을 바탕으로 다른 atom의 state를 설정할 수 있는 state를 modify 할 수 있는 역할을 한다.
<hr>
<h3>REF</h3>
<a href="https://hgko1207.github.io/2022/07/25/react-6/">https://hgko1207.github.io/2022/07/25/react-6/</a>
<a href="https://velog.io/@hwanieee/Recoil-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0">https://velog.io/@hwanieee/Recoil-시작하기</a>
<a href="https://code-masterjung.tistory.com/128">https://code-masterjung.tistory.com/128</a>
<a href="https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0">https://velog.io/@juno7803/Recoil-Recoil-200-활용하기</a>

 
 
 </div></div>

공부 기록하는 블로그

Suhyeon Lee

프로젝트에서 Recoil을 사용하여 상태관리를 하고자 해서 Recoil에 대해 알아보며 정리한 글이다.
설치
yarn add recoil
RecoilRoot
리코일 state를 사용하는 컴포넌트들은 를 필요로 한다. 를 사용하는 가장 좋은곳은 root component이다.
// index.tsx
import ReactDOM from 'react-dom';
import App from './App';
import 'styles/reset.scss';
import 'styles/global.scss';
import { RecoilRoot } from 'recoil';
ReactDOM.render(
 <RecoilRoot>
 <App />
 </RecoilRoot>,
 document.getElementById('root'),
);
Atom
Atoms는 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
atoms.tsx 파일을 생성하고 Recoil의 atom function 을 사용하여 필요한 데이터를 설정한다.
atom 은 두 가지를 요구하는데 첫 번째는 key(고유값)로 unique ID 이고 두 번째는 default value(기본값) 이다.
여러 컴포넌트에서 atom을 구독하고 있다면, 상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 된다.
현재 진행하는 프로젝트에서는 atom에 선택된 노드의 id, isActive, name값을 저장하려고 했으므로 다음과 같이 초기값을 설정했다.
// state.tsx
import { atom } from 'recoil';
import { NodeObject } from 'utils/types';
const initalNodeInfo: NodeObject = { id: 0, isActive: false, name: '' };
export const nodeAtom = atom({
 key: 'nodeAtom',
 default: initalNodeInfo,
});
이렇게 정의한 atom은 useRecoilState, useRecoilValue, useSetRecoilState 의 훅으로 사용할 수 있다.
useRecoilState : useState()와 같이 배열의 첫 번째요소가 상태, 두 번째 요소가 상태를 업데이트 하는 함수 반환, atom 을 읽고 쓰게 하기 위해서 사용
const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);
useRecoilValue : 상태 값만 필요한 경우에 사용
const NodeInfo = useRecoilValue(nodeAtom);
useSetRecoilState : 상태를 업데이트 하는 함수만 필요한 경우 사용, 컴포넌트가 atom 을 쓰게 하기 위해서 사용
const setNodeInfo = useSetRecoilState(nodeAtom);
useResetRecoilState : 인자로 받아온 atom의 state를 default값으로 reset
const resetNodeInfo = useResetRecoilState(nodeAtom);
이렇게 hook을 이용해서 바꾼 atom 값은 useRecoilValue() 을 사용해서 불러오면 된다.
const selectedNodeInfo = useRecoilValue(nodeAtom);
nk.js:41 Uncaught TypeError: Cannot assign to read only property 'vx' of object '#<Object>’
노드를 클릭하면 useRecoilState를 이용하여 Atom값을 변경한 후 저장하려고 했으나 다음과 같은 오류가 발생했다. 읽기 객체를 변형해서 생긴 오류로 보였다.
const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);
const handleClick = (node: NodeObject) => {
 fgRef.current?.centerAt(node.x, node.y, 1000);
 setModalIsOpen(true);
 setNodeInfo(node);
};
위의 코드가 기존 코드이다.
다음과 같이 필요한 값만 넣는 방법으로 바꿔서 해결했다.
 const [nodeInfo, setNodeInfo] = useRecoilState(nodeAtom);
 const handleClick = (node: NodeObject) => {
 fgRef.current?.centerAt(node.x, node.y, 1000);
 setModalIsOpen(true);
 setNodeInfo({ id: node.id, isActive: node.isActive, name: node.name });
 };
현재 프로젝트에서는 atom만을 사용하여 적용했기 때문에, 밑의 selector예제는 다른 사람들이 작성한 예제를 가져왔다.
추후 비동기 처리를 selector로 할 경우에 따로 정리를 할 예정이다.
Selector
atom 만을 사용해서는 비동기 처리를 할 수 없다. selector를 이용해서 비동기 처리를 한 번에 처리할 수 있다.
Selectors는 devived state 를 나타냅니다. devived state 란 state 를 입력 받아서 그걸 변형해 반환하는 순수 함수를 거쳐 반환된 값을 말한다.
Selector의 타입
key : selector를 구분할 수 있는 유일한 id, 즉 key 값을 의미합니다.
get : 에는 derived state 를 return 하는 곳 입니다. 예시 코드에서는 api call을 통해 받아온 data를 return 하게 됩니다. (해당 selector가 갖고 있습니다.)
export const cookieState = atom({
 key: 'cookieState',
 default: []
});
export const getCookieSelector = selector({
 key: "cookie/get",
 get: async ({ get }) => {
 try{
 const { data } = await client.get('/cookies');
 return data.data;
 } catch (err) {
 throw err;
 }
 },
 set: ({set}, newValue)=> {
 set(cookieState, newValue)
 }
});
다음과 같이 비동기 로직을 selector에선 한 번에 처리 할 수 있습니다. 주의하셔야 할 점은, selector는 순수함수 여야 한다는 것이다.
순수함수란, 같은 입력이 들어오면, 해당 입력에 대한 출력은 항상 같은 함수라는 뜻을 가지고 있다.
또한 selector는 read-only 한 RecoilValueReadOnly 객체로서 return 값 만을 가질 수 있고 값을 set 할 순 없는 특징을 가지고 있다.
selector는 결국 다른 selector나 atom의 값을 get해올 수 있고, get해온 값을 바탕으로 다른 atom의 state를 설정할 수 있는 state를 modify 할 수 있는 역할을 한다.
REF
https://hgko1207.github.io/2022/07/25/react-6/
https://velog.io/@hwanieee/Recoil-시작하기
https://code-masterjung.tistory.com/128
https://velog.io/@juno7803/Recoil-Recoil-200-활용하기

Recoil 적용과 에러 해결

댓글