To Do List - react로 다시 만들기

드디어 투두리스트 리액트 버전을 만든다.
가능하면 혼자 힘으로 해결해보고,, 
완성하면 리드미를 열심히 써보자

설치 목록
npx create-react-app to-do-list-react
npm i styled-components
npm i react-icons
npm i react-live-clock
npm i react-moment
npm i moment-timezone

아 그래도 순조롭게 진행되고 있었는데,,

const TodoProvider = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialTodo);

이 부분.. useReducer에 리듀서, 초기값 순서로 넣어야하는데, 반대로 넣었더니 안되었다. 리덕스랑 헷갈린 것 같다.

 

+) 새롭게 알게 된 것
import 할 때 { } 붙은 것과 안 붙은 것의 차이는
export 할 때 어떻게 했느냐의 차이
1)
export function add() { //code }   ---- > import { add }

2)
function add() { //code };
export default add;    -----> import add 

 

+)

화살표 함수 실수 했던 부분,,

case "TOGGLE":
      return state.map((todo) =>
        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo
      );

state.map( (todo) => todo.id 어쩌고 )
이래야 하는데,
state.map( (todo) => { todo.id 어쩌고 } )
이렇게 했더니 자꾸 막혔다,, 
{ } 괄호를 사용하면 return도 입력해야 한다.
그러나 간단한 코드일 경우 { } 생략 가능.

 

+) 

TodoInput.js 할 때
form 에 onSubmit 넣고 e.preventDefault()를 해도 새로고침이 막히질 않았다,,,
버튼태그 안에 버튼모양아이콘을 넣어서
내가 클릭한 게 버튼으로 인식이 안돼서 그런걸까?
그래서 일단 버튼태그에다가 onClick으로 위 함수를 그대로 넣었더니 정상적으로 동작했다.