[React + Recoil] 간단하게 만들어보는 TodoList

오늘은 React에서 만든 상태관리 라이브러리인 Recoil에 대해서 간단히 알아보고 

이 Recoil을 이용해 Redux로 만들었던 Todolist처럼 간단한 Todolist를 만들어보겠습니다.

 

---

! Recoil이란?

Recoil은 페이스북에서 만든 상태 관리 라이브러리입니다.

Redux와 Mobx와 같은 전역 상태 관리 라이브러리로 프로그램의 뎁스와 복잡도가 증가함에 따라 편리하게 

상태를 관리할 수 있게 해주는 것이죠.

아직 Redux나 Mobx와 같이 많은 인기를 받고 있지는 않지만 페이스북에서 React에 가장 알맞는 상태 관리 라이브러리로 만들어 나간다는 것을 믿다보면 인기를 많이 얻게 될지도 모르겠습니다...

 

또한, Recoil로 작성을 하게되면 기존의 Redux를 이용하기 위해 필요로 했던 여러문장의 코드들이 필요가 없어졌습니다.

(ex, mapDispatchToProps, Reducer...)

이부분 덕분에 굉장히 빠르게 습득을 해나갈 수 있는 장점을 가진 것 같습니다.

 

 

 

---

! Recoil의 기본 개념

 

1. Atom

Atom은 하나의 상태라고 생각할 수 있습니다(State 처럼)

Atom을 변경하거나, 삭제하거나, 하면 해당 Atom을 구독하고있는 컴포넌트들은 렌더링이됩니다. 

//Atom.js

import {atom} from 'recoil';

export const TODO_LIST = atom({
	key : 'TodoItems',
    default : [],
});

 

2. useRecoilState

Atom값을 구독하여 해당 컴포넌트에서 사용할 수 있게 하는 것이다(mapStateToProps와 비슷하다고 생각된다)

// App.js
import React from 'react';
import {TODO_LIST} from './Atom.js';

function App(){
	const items = useRecoilState(TODO_LIST);
    return(
    	...
    )
}

 

3. useRecoilValue

Atom값을 가져와서 사용할 수 있게 한다(단, 세터는 없이 값만 가져오게 된다)

 

4. useSetRecoilState

Atom값을 변경할 수 있게 하는 것이다. setter!

---

 

! Recoil을 이용한 간단한 TodoList만들어보기

이 부분은 코드만 보여드리도록 하겠습니다.

// index.js 
// Provider로 store를 묶어줬던 것처럼 묶어줍니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { RecoilRoot } from 'recoil';

ReactDOM.render(
    <RecoilRoot>
        <App />
    </RecoilRoot>
, document.getElementById("root")
);

// App.js
import React from 'react';
import MakeTodo from './MakeTodo';
import ShowTodo from './ShowTodo';


function App(){

  return(
    <div id="root">
      <ShowTodo />
      <MakeTodo />
    </div>
  )
}

export default App;

// MakeTodo.js

import React, { useState } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { TODO_LIST } from './atoms';

function MakeTodo() {

    // Recoil에 저장할 수 있게 하기
    const Items = useRecoilValue(TODO_LIST);

    // TODO_LIST라는 atom 값에 대한 set을 할 수 있는 함수
    const setTodo = useSetRecoilState(TODO_LIST);

    const [Input, setInput] = useState('');

    const AddTodo = () => {
        setTodo([...Items, Input]);
        setInput('');
    }
    const onChangeInput = e => {
        setInput(e.target.value);
    }

    return (
        <div>
            <input value={Input} onChange={onChangeInput} placeholder="ADD to Do!"></input>
            <button onClick={AddTodo}>ADD</button>
        </div>
    )
}

export default MakeTodo;

// ShowTodo.js

import React, { useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {TODO_LIST} from './atoms';

function ShowTodo(){

    // Recoil 값을 가져와서 사용하기
    const Items = useRecoilValue(TODO_LIST)
    // TODO_LIST에 대한 set을 할 수 있는 함수
    const setItems = useSetRecoilState(TODO_LIST);

    const DeleteTodo = e => {
        let newItems = Items.filter((data,index)=> index !== parseInt(e.target.id));
        setItems(newItems);
    }

    const UpdateTodo = e => {
        let newtext = prompt("새로운 값을 입력하세요");
        let newItems = Items.map((data,index)=>{
            if(index === parseInt(e.target.id)){
                return newtext;
            }else return data;
        })
        setItems(newItems);
    }

    return(
        <div>
           {Items.map((data,index)=>(
           <div style={{borderStyle:'solid'}}>
               <p>{data}</p>
               <button id={index} onClick={DeleteTodo}>Delete</button>
               <button id={index} onClick={UpdateTodo}>Update</button>
            </div>
           ))}
        </div>
    )
}

export default ShowTodo;

// atoms.js

import {atom} from 'recoil';

export const TODO_LIST = atom({
    key : "TodoItems",
    default : []
});