react-recoil-todo

어쩌다보니 회사에서 React를 하게 되었습니다. 저는 개인적으로 Vue가 좀 더 취향에 맞지만, 프론트엔드 개발자가 되시려는 분들은 Vue보다는 React를 먼저 공부해보시는게 낫다는 생각을 합니다. Vue보다 React가 좀 더 귀찮고 해야될 일도 많기 때문에, React하다가 Vue로 넘어가면 쉽다는 생각을 하지만 Vue에서 React로 넘어가면 이걸 왜 이렇게 하지? 하는 생각이 들거든요.

React를 처음 접하고 공부했을 때가 기억이 납니다. 사실 React보다는 React를 하기 위한 환경구성과 redux에 발목이 잡혔던 기억들이 더 많이 나는 것 같습니다. 그 때는 reducer 개념을 이해하는게 왜 그렇게 어려웠을까요? Todo앱을 7번 정도 만들고나서 reducer에 감을 잡았을 때 그 희열이 아직도 생생한 것 같습니다.

아무튼, 저는 백엔드 개발자라 프론트엔드쪽을 어느 정도 손을 떼고 있었는데, 나름 여러가지를 구독하고 있었기 때문에 최근이라고 하긴 뭣하지만 React Hook이 업데이트 되었을 때나 Recoil이라는 녀석이 새로 나왔을때, 그 존재를 알고만 있었지만 지금까지 따로 들여다 볼 일은 없었습니다. 하지만 이렇게 회사일 덕분에 React를 다시 공부하게 되면서 한 번 훑어볼까?마빠볼까? 하는 생각에 프론트엔드 개발 튜토리얼의 정석인 TodoApp을 한 번 만들어 보기로 했습니다.

준비

우선, 아래와 같이 개발 환경을 셋팅하였습니다.

$ npx --version
> 7.11.1
$ npx create-react-app recoil-tutorial
$ cd recoil-tutorial
$ npm install recoil todomvc-app-css
$ npm start

TodoMVC에서 제공하는 템플릿과 css를 베이스로 TodoApp을 만들어 볼겁니다.

HTML 템플릿은 여기에서 확인하실 수 있습니다.

create-react-app으로 새 프로젝트를 생성하고 나서, 필요 없는 파일들은 전부 삭제하고, src 디렉터리에는 App.js와 index.js만 남겨줍니다.

그리고, App.js와 index.js를 아래와 같이 수정합니다.

// src/App.js
function App() {
  return <>
    <section className="todoapp" />
  </>
}

export default App

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { RecoilRoot } from 'recoil'
import App from './App'
import 'todomvc-app-css/index.css'

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)

RecoilRoot는 recoil을 사용하기 위해 반드시 필요합니다.

기본 컴포넌트 구성

템플릿을 참고하여 Header Main Footer Info 이렇게 4가지의 기본 컴포넌트를 구성하겠습니다.

// src/components/Header/index.js
function Header() {
  return (
    <header className="header">
      <h1>todos</h1>
      <input className="new-todo" placeholder="What needs to be done?" autoFocus />
    </header>
  )
}

export default Header

// src/components/Main/index.js
function Main() {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        <li className="completed">
          <div className="view">
            <input className="toggle" type="checkbox" checked />
            <label>Taste JavaScript</label>
            <button className="destroy" />
          </div>
    	  <input className="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>
  )
}

export default Main

// src/components/Footer/index.js
function Footer() {
  return (
    <footer className="footer">
      <span className="todo-count"><strong>0</strong> item left</span>
      <ul className="filters">
        <li>
          <a className="selected" href="#/">All</a>
        </li>
    	<li>
    	  <a href="#/active">Active</a>
    	</li>
    	<li>
    	  <a href="#/completed">Completed</a>
    	</li>
      </ul>
      <button className="clear-completed">Clear completed</button>
    </footer>
  )
}

export default Footer

// src/components/Info/index.js
function Info() {
  return (
    <footer className="info">
      <p>Double-click to edit a todo</p>
      <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Created by <a href="http://todomvc.com">you</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
  )
}

export default Info

src에 components 디렉터리를 만들고, 하위로 디렉터리를 구성하였습니다.

다음 시간부터 recoil을 간략하게 설명하면서 하나씩 구현해보도록 하겠습니다!