react를 활용하여 To do list를 만드는 개인과제를 제출까지 끝마쳤다.
개인과제를 진행하면서 기술적 어려움으론 리액트의 전체적인 이해도 부족도 있지만 특히 그 중에서도
useState에 대한 이해도 부족, 컴포넌트 분리 과정에 있어서 어려움을 겪었다..
컴포넌트 분리를 잘못된 방법으로 하다 보니깐 점점 코드가 꼬이게 되다 보니.. 큰 틀로 Header, Article
로만 나누게 되었다. button, todoItem, todoForm도 전부 분리하고 싶었지만 못한 것이 아쉽다.
추가로 제목, 내용을 기재하지 않고 등록 버튼을 누르면 아무 내용도 없는 카드가 등록이 되길래
제목이나 내용 인풋 둘 중 하나라도 비어있다면 등록이 안되게끔 유효성 검사도 추가했다
과제를 제출할 때 몇가지 질문 사항도 있었는데, 제출했던 답변대로 정리를 해봤다.
Question 1. JSX 문법이란 무엇일까요?
Answer: JavaScript의 확장형 문법입니다. 기존의 JavaScript에 비해 코드의 복잡도를 개선시킬 수 있으며, 가독성 또한 좋아지게 됩니다. JSX 문법을 사용하기 위해선 bable을 적용한 후, 트랜스파일을 거쳐서 순수 JavaScript로 변환됩니다.
Question 2. 사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이틀과 같은 애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요?
Answer: 리액트의 useState를 사용하였습니다. useState는 컴포넌트 내에서 동적으로 데이터를 관리해줄 수 있게 만들어주는 훅(hook)이며, 함수형 컴포넌트에서 가변적 상태를 지닐 수 있게 합니다.
State는 setState가 변경된다면 페이지가 자동 재렌더링 되고, 읽기 전용이므로 직접 수정하면 오작동을 일으킨다는 특징이 있습니다.
Question 3. 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요?
Answer: 대부분 useState,props를 통해 공유하였으며 이를 통해 기존의 js를 다룰 때 보다 효율적으로 코드를 관리할 수 있게 됐습니다.
(위 질문과 답변이 비슷한 걸 보아 내가 질문 이해를 잘못한 거 같다..)
Question 4. 기능 구현을 위해 불변성 유지가 필요한 부분이 있었다면 하나만 설명해 주세요.
Answer: 제 코드에서의 불변셩 유지가 필요한 부분은 투두리스트 목록의 업데이트 부분입니다.
state는 읽기 전용이므로 직접 수정하면 오작동을 일으키기 때문에 상태 값을 직접 수정하는 것이 아니라
새로운 배열을 반환한 후, 그 새로운 배열을 업데이트하였습니다.
setTodo(...todo, newList); 코드를 예로 들자면 기존의 todo는 불변성을 유지한 채, 새로운 배열을 생성하고 그 배열을 setTodo 함수를 통해 업데이트했습니다.
