TIL, 06.23

리액트 입문주차 강의 듣기

항해 99에서 리액트 입문주차 강의를 들었다. 리액트 책을 초기이긴 하지만 봐서 그런지 강의 이해가 잘 되었다

React에 대한 소개부터 반복되는 컴포넌트 처리하고 추가 삭제하는 방법에 대해 익혔다

 

 

My Todo List 만들어봄

리액트 입문주차 강의를 듣고 그것을 기반하여 TodoList를 만들어보았다

강의 내용에서 나온 추가 삭제하는 방법을 이용하여 만들고 나름대로 로직을 짜 완료하고 취소하는 등에 기능을 만들었다

만들다 보니 내가 생각한 데로 뚝딱하고 나왔으면 좋았을 텐데 계속해서 오류가 계속 생겨 console.log와 한 몸이 되어 코드를 짰다 

처음에 만났던 큰 문제는 react Cannot update a component에러였는데 찾아보니 컴포넌트 렌더링을 하는 동안 함수를 호출했기 때문에 컴포넌트를 그리다 말아서 생긴 오류였다

해당 함수를 화살표 함수를 통해 parameter를 지나가게 하여 해결했다

두번째 만난 문제는 key값에 대한 문제였다. key값을 어떤 것으로 골라야 할까 하다가 처음에는 index로 생각해 보았다 하지만 순서가 바뀔 수 있는 경우 key를 인덱스로 쓰는 것은 불가능하기 때문에(삭제 기능이 있어 index로는 절대 못함) id 값을 넣어주고 마지막 들어온 데이터 id값 +1을 넣어주는 방식으로 코드를 짰다

처음에 생각한대로 만들기는 했는데 최종적으로 내가 만든 것을 보니 너무 허접했다

함수도 잘 나눠보고 컴포넌트도 잘 나눠보아 가독성도 높고 좋은 코드를 만들고 싶었는데 아직까지는 너무 힘든 단계이다

리액트책을 확인해보니 TodoList에 대한 목차가 있어 그 부분을 공부하고 부족한 부분을 채워야겠다

 

후기

ㅠㅠㅠㅠㅠㅠㅠ 처음 만드는 것이지만 너무 마음에 안 들어ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

공부를 좀 더 해보고 코드 리팩토링을해서 좀더 알찬 놈으로 만들 테다

useCallback함수도 써서 최적화도 해보고 블록(컴포넌트)도 좀 더 잘 나눠볼 테다!!!