TIL_230622 | todo list 다시 만들기.. redux로 상태관리

---

 

🛠  트러블 슈우팅

checkbox

문제 상황

버튼 말고, input type을 checkbox로 해서 todo list의 완료, 취소를 나타내려했다. html에서는 type이 checkbox인 애한테 default값으로 checked 속성? 줘도 체크박스를 다시 uncheck할 수 있었는데 react에서는 안됐다.. 당연리 렌더링 관련 문제였겠져

 

해결과정 및 해결방법

블로그 서칭이 잘 안돼서 이 블로그에서 글 읽다가 역시... onChange를 이용해야하나 생각하다가 너무 안되어서 chatGPT한테 물어보니 

 

checked={true or false}를 이용해서 기본 checked 상태를 정해주되 checked={여기에}들어가는 건 state로 상태관리가 되는 걸 쓰면 된다고 했다.

 

알려준대로 했더니 id targeting을 하지 않아서 전체목록이 사라지는 문제가 발생하여 onChange 이벤트에 연결할 함수에 id targeting하고 todolist에서 해당 id항목만 isDone을 바꿔주어 redux 상태 관리를 통해 리렌더링 해주는 방식으로 해결했다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

// 함수형 컴포넌트 return 앞부분
const onCheckboxChangeEventHandler = id => {
const isdoneTODO = todos.map(item => {
  if (item.id === id) {
    return { ...item, isDone: !item.isDone };
  } else {
    return item;
  }
});
dispatch({
  type: 'DONE_TODO',
  payload: isdoneTODO,
});
};


// 같은 함수형 컴포넌트 return 뒷부분
// 인자로 보내주는 todo.id가 isDone부분을 변경해줘야하는 투두아이디..
<input type="checkbox" checked={todo.isDone} onChange={() => onCheckboxChangeEventHandler(todo.id)} />

 

알게된 점

결론은 기본값을 주었을 때 우리 눈에 바뀌어야할 게 있다면 '이벤트 발생'에 따라 state변화를 주어서 react가 그 부분을 리렌더링 하게 만들면 해결이 나는 것 같다

 

 

 

🛣 새로 알게 된 거

 라우터 사용방법  |  어디에 무얼 적을까

💟  index.html의 id가 root인 태그  안으로 

💟  App 컴포넌트 파일이 그려지는데

💟  원래는 이런(아래와 같은) 식으로 App.jsx이 메인 페이지라 바로 App.jsx에 그림을 그리지만

💟  라우터를 사용하고 싶으면 App.jsx의 return문에 Router 컴포넌트를 넣어줘

💟  Layout은 유지하고 layout 안의 내용만 갈아끼우고 싶다면 아래와 같이!

💟   참고로 기존에 한 페이지로만 되어있을 때는 yarn start해서 가장 먼저 뜬 화면이 App.jsx에서 작성한 부분이었는데 

똑같이 App.jsx 먼저 작동하는 건 맞지만 Router를 연결하면 path="/"인것부터 보여줌!!

따라서 path="/"로 설정한 컴포넌트에서 메인 화면을 그려주면 됨!