Age of Discovery

기술매니저님과 면담 후에 스스로에게 들었던 생각 '리액트를 왜 쓰는지도 모른채로 좋다니까 사용하고 있었구나' 리액트는 기본적으로 가상 DOM을 사용하여 필요한부분만 렌더링하기 때문에 DOM에 직접 접근하면 안된다. let title_input = document.querySelector('.title-input') 이런식으로 직접접근하면 안된다는 것이다 input태그 두개를 저따구로 제어해놓고 3일만에 개인과제 끝냈다고 좋아하던 오만한 나의 모습을 반성합니다. 그럼 어떤식으로 접근을 해야하느냐? ref 훅을 사용하든지 아니면 state와 props를 사용하는 것이다. ref도 꼭 필요할때만 사용해야한다. (권장되는 방식은 아닌듯..) onChange함수와 구조분해할당을 이용해서 DOM을 리액트스럽게 제어..

위 사진에서 List.js와 Todo.js 컴포넌트를 파헤쳐보자 위와 같이 완료버튼을 누를시 완료!버튼을 취소!버튼으로 변경한 후 밑 줄로 내리는 작업이다. List.js 파일안에서 const setBtn = (todo) => { let new_arr = [...arr] let new_obj = new_arr.map(user => { if ( user.key === todo.key ) { if (user.isDone === '완료!') { return ( {...user, isDone : '취소!'} ) } else { return ( {...user, isDone : '완료!'} ) } } else { return {...user} } }) setArr(new_obj); } todo파라미터를 받아온 후..

7월 22일에 리액트 기초 주간이 시작되었다..!! 다른 것들은 잠시 뒤로하고 주특기인 리액트를 다듬을 수 있게 되어 개인적으로 가장 기대하던 시간이었다. 이번 주는 개인과제와 팀과제가 있는데 개인과제는 투두리스트를 만든 후 깃헙에 커밋하는 것이고 팀과제는 리액트에 대한 지식을 쌓으며 묻고답하는 시간을 가지는 것이다. 개인과제를 빨리 끝낸 후 팀과제 및 발표준비를 하려 했으나 생각한 것보다 일찍 끝내지 못했고 이제서야 마친 후 글을 작성하는 중이다 ㅋㅎㅋㅎ 개인과제의 조건은 투두리스트 CRUD 기본기능을 갖추는 것, 그리고 폴더구조를 동일하게 하는 것과 컴포넌트구성을 예제와 일치시키는 것이었다. 다만 hook은 state만 사용하는 것이 중요했다. Create랑 Delete만 먼저 다뤄보자! 내가 짰던 ..