<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/React"><span>React</span></a></p><h3>[Recoil] Selectors 기본 알아보기</h3>
                </div><p><cite>JayLee</cite>
                  <span> 2023. 1. 27. 12:59</span>
                </p><div>
                                <figure data-ke-mobilestyle="widthOrigin" data-origin-width="1744" data-origin-height="1160">
    <span data-url="https://blog.kakaocdn.net/dn/bAZSVh/btrXhmTr4fq/ov9LmzQncNjG3rjrYueDm0/img.jpg" data-lightbox="lightbox" data-alt="이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다 🎁">
        <img src="https://blog.kakaocdn.net/dn/bAZSVh/btrXhmTr4fq/ov9LmzQncNjG3rjrYueDm0/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1744" data-origin-height="1160">
    </span>
    <figcaption>이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다 🎁</figcaption>
</figure>

<p data-ke-size="size16">selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다.</p>

<p data-ke-size="size16">selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, atoms과 selectors를 조합/가공하여 파생될 수 있는 모든 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로 쓸데 없는 상태의 보존을 방지한다.</p>

<p data-ke-size="size16">selector 함수 내부에서 사용하는 atoms 또는 selectors가 업데이트 되면 해당 selector 함수도 다시 실행된다.</p>
<pre><code>const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) =&gt; {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});
</code></pre>
<p data-ke-size="size16">예를들어 위 fontSizeLabelState selector의 경우, fontSizeState atom과 의존성이 있기 때문에 fontSizeState atom이 업데이트되면 fontSizeLabelState selector 함수도 다시 실행된다.</p>

<p data-ke-size="size16">위 코드를 통해 selectors에 대해 좀 더 자세히 살펴보자.</p>

<p data-ke-size="size16">selectors는<span>&nbsp;</span><span><b>selector</b></span><span>&nbsp;</span>함수를 사용해 정의한다.</p>
<p data-ke-size="size16"><span><b>get</b></span><span>&nbsp;</span>속성은 계산될 함수다. get 함수는 get이라는 파라매터를 받는데, get 파라매터를 통해 atoms나 다른 selectors를 사용할 수 있다. get 함수를 통해 의존성이 생기면, 의존성을 갖는 atoms나 selectors가 업데이트 되었을 때, 이 함수도 다시 실행된다.</p>

<p data-ke-size="size16">이렇게 정의한 selectors는 어떻게 사용할 수 있을까?</p>
<pre><code>function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    &lt;&gt;
      &lt;div&gt;Current font size: ${fontSizeLabel}&lt;/div&gt;

      &lt;button onClick={setFontSize(fontSize + 1)} style={{fontSize}}&gt;
        Click to Enlarge
      &lt;/button&gt;
    &lt;/&gt;
  );
}
</code></pre>
<p data-ke-size="size16">selectors는 atoms와 동일한 방법으로 사용할 수 있다. fontSizeLabelState selector의 경우, get 함수만 정의하여 읽기만 가능한 selector라고 할 수 있다. 읽기만 가능하기 때문에 혼란을 줄이기 위해, useRecoilValue()를 사용해 해당 selector를 사용하고 있다.(만약, selector에 set 함수도 정의했다면, useRecoilState()를 사용해 읽고 쓸 수 도 있다!)</p>

<p data-ke-size="size16">만약, 위 함수에서 setFontSize() 함수를 통해 fontSizeState의 상태가 변화하면 fontSizeState atom과 해당 atom에 의존성을 갖는 fontSizeLabelState selector가 모두 다시 렌더링된다.</p>

<p data-ke-size="size16">참고:</p>
<figure id="og_1674791681252" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="주요 개념 | Recoil" data-og-description="개요" data-og-host="recoiljs.org" data-og-source-url="https://recoiljs.org/ko/docs/introduction/core-concepts/" data-og-url="https://recoiljs.org/ko/docs/introduction/core-concepts" data-og-image="https://scrap.kakaocdn.net/dn/1RdfE/hyRpLpxfTk/Ehu7dPVAOTanPzV3leCHt0/img.png?width=1420&amp;height=646&amp;face=0_0_1420_646,https://scrap.kakaocdn.net/dn/dk9mOf/hyRpGPiclP/BfvnuOpl0g4TPVCTzQfkIk/img.png?width=1420&amp;height=646&amp;face=0_0_1420_646"><a href="https://recoiljs.org/ko/docs/introduction/core-concepts/" target="_blank" rel="noopener" data-source-url="https://recoiljs.org/ko/docs/introduction/core-concepts/">

<div>
<p data-ke-size="size16">주요 개념 | Recoil</p>
<p data-ke-size="size16">개요</p>
<p data-ke-size="size16">recoiljs.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/1RdfE/hyRpLpxfTk/Ehu7dPVAOTanPzV3leCHt0/img.png?width=1420&amp;height=646&amp;face=0_0_1420_646,https://scrap.kakaocdn.net/dn/dk9mOf/hyRpGPiclP/BfvnuOpl0g4TPVCTzQfkIk/img.png?width=1420&amp;height=646&amp;face=0_0_1420_646"></figure>
<p data-ke-size="size16">이&nbsp;사진을&nbsp;Unsplash에서&nbsp;제공해&nbsp;주신&nbsp;Alexander&nbsp;Schimmeck&nbsp;@alschim&nbsp;님께&nbsp;감사드립니다&nbsp;🎁</p>
            
            
                </div></div>

Hello Jay's Programming World!

selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다.
 
selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, atoms과 selectors를 조합/가공하여 파생될 수 있는 모든 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로 쓸데 없는 상태의 보존을 방지한다.
 
selector 함수 내부에서 사용하는 atoms 또는 selectors가 업데이트 되면 해당 selector 함수도 다시 실행된다.
const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';
    return `${fontSize}${unit}`;
  },
});
예를들어 위 fontSizeLabelState selector의 경우, fontSizeState atom과 의존성이 있기 때문에 fontSizeState atom이 업데이트되면 fontSizeLabelState selector 함수도 다시 실행된다.
 
위 코드를 통해 selectors에 대해 좀 더 자세히 살펴보자.
 
selectors는 selector 함수를 사용해 정의한다.
get 속성은 계산될 함수다. get 함수는 get이라는 파라매터를 받는데, get 파라매터를 통해 atoms나 다른 selectors를 사용할 수 있다. get 함수를 통해 의존성이 생기면, 의존성을 갖는 atoms나 selectors가 업데이트 되었을 때, 이 함수도 다시 실행된다.
 
이렇게 정의한 selectors는 어떻게 사용할 수 있을까?
function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);
  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>
      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}
selectors는 atoms와 동일한 방법으로 사용할 수 있다. fontSizeLabelState selector의 경우, get 함수만 정의하여 읽기만 가능한 selector라고 할 수 있다. 읽기만 가능하기 때문에 혼란을 줄이기 위해, useRecoilValue()를 사용해 해당 selector를 사용하고 있다.(만약, selector에 set 함수도 정의했다면, useRecoilState()를 사용해 읽고 쓸 수 도 있다!)
 
만약, 위 함수에서 setFontSize() 함수를 통해 fontSizeState의 상태가 변화하면 fontSizeState atom과 해당 atom에 의존성을 갖는 fontSizeLabelState selector가 모두 다시 렌더링된다.
 
참고:
이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다

[Recoil] Selectors 기본 알아보기

댓글