1. 구상

react 프로젝트로 to do list app 만들기를 진행할 것이다.
우선 css는 입히지 않겠다.
기능 구현에 중점을 두고 진행하려한다.
그래서 다른 라이브러리는 사용하지 않고 to do list item들만 저장 가능하게 localstorage를 사용한다.

1-1. 컴포넌트

1.할 일 입력창
2.할 일 리스트

우선은 이 두가지 컴포넌트만 생성한다. (수정, 삭제, 체크 기능은 다음에)

파일 구조

src
⌞components - Input.js
	    - List.js
-App.js
-index.js

2. 컴포넌트 연결

App.js 에 Input.js 와 List.js 컴포넌트를 연결해준다.

import React from 'react';
import Input from 'components/Input';
import List from 'components/List';

function App() {
  return (
    <>
      <Input />
      <List />
    </>
  );
}

export default App;

3. 할 일 입력창 만들기

할 일 입력창은 Input.js 컴포넌트에 만든다
아주아주 간단하게 화면에 그려지는 부분은 input,button 태그를 사용하여 만들어줬다.

<div>
      <input />
      <button>확인</button>
</div>

3-1. input

이제 input에서 입력 받은 값을 어디다가 저장시켜야 한다.

input의 onChange를 통해 value를 받아온다.

const onChange = (event) => {
    const { value } = event.target;
    console.log(value);
};

자 이렇게 onChange 함수를 작성하고 input 태그에 연결을 하면 console log에 input 창에 입력한 value 값이 잘 찍히는 것을 확인 할 수 있다.(input tag value에 todoItem 연결해주는 것을 까먹지말자! 방금 까먹음) 이 value를 todoItem이라는 변수에 저장해보자!

 const [todoItem, setTodoItem] = useState('');

이렇게 useState를 사용해 todoItem이라는 변수를 만들어주고, console을 찍어줬던 onChange 함수안에 setTodoItem(value)를 해주면 이제 todoItem은 onChange 함수를 통해 input에 작성 된 value값을 저장하게 된다 !

3-2. button

todoItem에 존재하는 데이터를 확인 버튼을 클릭하는 순간에 localStorage에 저장을 시킬 것이다.
(지금까지는 했던 작업은 useState변수에 저장 된 것이라서 새로고침을 하면 데이터가 사라진다.)
버튼의 onClick 함수를 통해 저장하는 과정을 진행한다. 저장을 완료했으면 todoItem을 초기화 해주는 것도 잊지말자.

const onClick = () => {
  const tempArray = window.localStorage.getItem('todoList')
      ? JSON.parse(window.localStorage.getItem('todoList'))
      : [];

    window.localStorage.setItem(
      'todoList',
      JSON.stringify([...tempArray, todoItem]),
    );
    setTodoItem('')
};

todoItem을 결국엔 list로 뿌려주어야 하기 때문에 localStorage에 array를 저장하게 될 것인데,
localStorage는 DOM string만 취급하기 때문에 array 데이터를 string으로 parsing 해서 전달해줘야 한다.

todoList array에 기존 값이 존재한다면 유지 한 채로 새 값을 넣어줘야 하기 때문에 '...' 이라는 spread operator 문법을 사용하여 배열을 합해준다 (array concat 으로 대체 가능)

여기 까지 작업이 완료 되었다면 개발자 도구의 Application tab storage를 확인해보자

input 창에 값을 입력 후 확인 버튼을 클릭하면 localstorage에 잘 저장 되어있는 모습이 보인다.

3-2-1. object array

지금 처럼 간단하게 string으로 이루어진 array를 만들면 참 좋겠지만,
나중에 수정, 삭제와 같은 작업을 진행하게 되면 각각의 고유한 아이디가 필요하기 때문에
localStorage 배열안에 [{id:1, item:'일어나기'},{id:2, item:'잠자기'}]와 같은 형태로 저장 되어야 한다.

그래서 onClick 이 될 때(저장을 할때) Id 값도 같이 저장해주려고 한다. Id는 Data.now()를 사용하여 고유 값으로 생성하여 저장한다.

Date.now() 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환합니다.

const onClick = () => {
  const tempArray = window.localStorage.getItem('todoList')
    ? JSON.parse(window.localStorage.getItem('todoList'))
    : [];
  window.localStorage.setItem(
    'todoList',
    JSON.stringify([...tempArray, { id: Date.now(), item: todoItem }]),
  );
  setTodoItem('');
};

3-2-2. list update

확인 버튼을 누를때마다 list가 자동 갱신 되는 것 처럼 보이기 위해 setTodoItem을 초기화 해 준 이후에 window.location.reload() 도 같이 해줄 것이다.

window.location.reload();

4. 할 일 목록창 만들기

할 일 목록창은 매우 간단하다.
window.localstorage의 todoList 값 만 가져와서 뿌려주면 된다.

 const [todoList, setTodoList] = useState([]);

localstorage에서 받아온 object array를 todoList라는 useState 변수에 저장 시켜줄 것이다. (초기값은 [])

  useEffect(() => {
    if (window.localStorage.getItem('todoList')) {
      setTodoList(JSON.parse(window.localStorage.getItem('todoList')));
    }
  }, []);

useEffect 를 통해 화면이 mount 될 때, localStorage에 todoList라는 값이 있는지 없는지 체크해서 setTodoList에 저장해준다.

그리고 화면 단에서는

<div>
      {todoList?.map((item, index) => (
        <p key={`todo${index}`}>{item?.item}</p>
      ))}
</div>

localStorage에서 불러와서 todoList라는 useState 변수에 저장된 array를 뿌려준다!

끝!

~완성 된 화면~