{
  "path": "/*",
  "*": "2022-10-24-09-08-recoil",
  "uri": "/",
  "location": {
    "pathname": "/2022-10-24-09-08-recoil/",
    "search": "",
    "hash": ""
  },
  "data": {
    "markdownRemark": {
      "html": "<h1 id=\"상태-관리state-management\" style=\"position:relative;\"><a href=\"#%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%ACstate-management\" aria-label=\"상태 관리state management permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%ACstate-management\" aria-label=\"상태 관리state management permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>상태 관리(State Management)</h1>\n<h2 id=\"recoil에-대하여-말하기-전에-먼저-상태-관리에-대하여-정의하고-들어가도록-하자\" style=\"position:relative;\"><a href=\"#recoil%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EB%A7%90%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EB%A8%BC%EC%A0%80-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EC%A0%95%EC%9D%98%ED%95%98%EA%B3%A0-%EB%93%A4%EC%96%B4%EA%B0%80%EB%8F%84%EB%A1%9D-%ED%95%98%EC%9E%90\" aria-label=\"recoil에 대하여 말하기 전에 먼저 상태 관리에 대하여 정의하고 들어가도록 하자 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#recoil%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EB%A7%90%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EB%A8%BC%EC%A0%80-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EC%A0%95%EC%9D%98%ED%95%98%EA%B3%A0-%EB%93%A4%EC%96%B4%EA%B0%80%EB%8F%84%EB%A1%9D-%ED%95%98%EC%9E%90\" aria-label=\"recoil에 대하여 말하기 전에 먼저 상태 관리에 대하여 정의하고 들어가도록 하자 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Recoil에 대하여 말하기 전에 먼저 상태 관리에 대하여 정의하고 들어가도록 하자.</h2>\n<ul>\n<li>상태 관리에서 상태(state)란 애플리케이션의 동작 방식을 설명하는 모든 데이터를 의미한다.\n<ul>\n<li>상태는 외부에서 주입되는 동적인 데이터(서버로부터 받은 데이터) 와 애플리케이션 UI 상태(IsOpen, IsClose 등)의 두 가지로 나눌 수 있다.</li>\n</ul>\n</li>\n<li>React는 상태를 기반으로 View를 제어하는 라이브러리 이다.</li>\n</ul>\n<hr>\n<h1 id=\"react-자체의-상태-관리\" style=\"position:relative;\"><a href=\"#react-%EC%9E%90%EC%B2%B4%EC%9D%98-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC\" aria-label=\"react 자체의 상태 관리 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#react-%EC%9E%90%EC%B2%B4%EC%9D%98-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC\" aria-label=\"react 자체의 상태 관리 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React 자체의 상태 관리</h1>\n<p>React 자체적으로 내장된 상태 관리 기능은 단순하고 호환성을 유지하기가 좋다. 하지만 아래와 같은 한계사항을 가진다.</p>\n<ul>\n<li>컴포넌트의 상태를 공유하기 위해서는 <strong>상태를 공통된 상위 요소까지 끌어올려야 한다.</strong> 심한 경우 애플리케이션의 최상단 까지 올라가야 하는 문제가 발생 할 수 있다.(prop driling).</li>\n<li>Context API는 동적인 데이터를 저장하는데 적합하지 않다. 또한 최적화 관점에서 성능적 한계가 명확하다.</li>\n<li>Context API는 <strong>컴포넌트의 로컬 상태를 공통된 상위 요소로 끌어 올린 후 하단에 흘려보내는 구조를 가지고 있다는 점에서 상태 관리보다는 의존성 주입에 가깝다고 생각한다.</strong>\n위에서의 한계점 때문에 <strong>‘상태가 만들어지는 곳’ 과 ‘상태를 사용하는 곳’</strong> 의 코드 분할이 어렵게 된다는 문제점이 존재한다.</li>\n</ul>\n<p>위의 문제점을 해결하기 위해 Redux, MobX, Recoil, Jotai, Zustand등의 ‘전역 상태관리’ 라이브러리들이 등장했다.</p>\n<hr>\n<h1 id=\"recoil\" style=\"position:relative;\"><a href=\"#recoil\" aria-label=\"recoil permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#recoil\" aria-label=\"recoil permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Recoil?</h1>\n<p>Recoil은 React를 위한 ‘상태 관리’ 라이브러리이다. 또한 React를 만든 페이스북의 팀이 만들었고, React의 Hook과 매우 유사한 용법을 가지고 있다.</p>\n<p>Recoil은 전역 상태를 <strong>‘atom’</strong> 이라는 단위로 관리한다. 또한 React 컴포넌트는 atom을 구독하고, 업데이트 할 수 있다.\nAtom이 업데이트 되면, 구독된 각각의 컴포넌트들은 새로운 상태를 반영하여 다시 렌더링 프로세스를 수행한다.</p>\n<h2 id=\"atom의-사용법\" style=\"position:relative;\"><a href=\"#atom%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95\" aria-label=\"atom의 사용법 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#atom%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95\" aria-label=\"atom의 사용법 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>atom의 사용법</h2>\n<p>Atom은 아래와 같이 생성 할 수 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> atom <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'recoil'</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">const</span> themeState <span class=\"token operator\">=</span> <span class=\"token function\">atom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    key<span class=\"token operator\">:</span> <span class=\"token string\">'themeState'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token keyword\">default</span><span class=\"token operator\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>간단하지 않나?</p>\n<p>컴포넌트에서 atom을 읽거나 쓰려면 ==useRecoilState== 라는 훅을 사용하면 된다. ==useState==훅과 용법이 비슷하게 사용가능하다.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> useRecoilState <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'recoil'</span>\n\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> themeState <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'../atoms'</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">ThemeSwitch</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>theme<span class=\"token punctuation\">,</span> setTheme<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useRecoilState</span><span class=\"token punctuation\">(</span>themeState<span class=\"token punctuation\">)</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n        <span class=\"token operator\">&lt;</span>button\n            onClick<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span>\n                <span class=\"token function\">setTheme</span><span class=\"token punctuation\">(</span>theme <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>theme <span class=\"token operator\">===</span> <span class=\"token string\">'dark'</span> <span class=\"token operator\">?</span> <span class=\"token string\">'light'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'dark'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token operator\">></span>\n            Click to Theme Switch\n        <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>button<span class=\"token operator\">></span>\n    <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h1 id=\"레퍼런스\" style=\"position:relative;\"><a href=\"#%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4\" aria-label=\"레퍼런스 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"#%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4\" aria-label=\"레퍼런스 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>레퍼런스</h1>\n<ol>\n<li><a href=\"https://recoiljs.org/ko/\">https://recoiljs.org/ko/</a></li>\n<li><a href=\"https://jbee.io/react/thinking-about-global-state/\">https://jbee.io/react/thinking-about-global-state/</a></li>\n<li><a href=\"https://abangpa1ace.tistory.com/212\">https://abangpa1ace.tistory.com/212</a></li>\n</ol>",
      "fields": {
        "slug": "/2022-10-24-09-08-상태관리 라이브러리 Recoil/"
      },
      "frontmatter": {
        "date": "2022-10-22 04:08"
      }
    }
  },
  "pageContext": {
    "id": "3ca62f3b-b10f-5117-a7b3-3844a1882d9c",
    "fields__slug": "/2022-10-24-09-08-상태관리 라이브러리 Recoil/",
    "__params": {
      "fields__slug": "2022-10-24-09-08-recoil"
    }
  },
  "params": {
    "fields__slug": "2022-10-24-09-08-recoil"
  }
}