줄바꿈기능 미지원(overflow-y?)
공백 입력 차단 필요.

이슈입니다. 커밋 엮기 테스트중입니다.

항해 99 15조 React 페어 코드 리뷰입니다 👍

1. 상태관리와 최적화

• uuid 라이브러리를 통해 id의 중복을 완전히 차단할 수 있다는 점이 좋습니다. App.js에는 useCallback메소드를 사용해 함수의 재생성을 막아 렌더링 최적화도 잘 이루어지고 있는 것으로 보입니다. 만약 추가하신다면 React.memo를 TodoListItem.js 에도 적용해 다른 item의 변화에도 불필요하게 해당 item이 함께 리렌더링 되는 것을 막는것도 방법일 것 같습니다.

2. 컴포넌트의 분리

• Layout component를 통해 전체적인 틀을 만드신걸로 보입니다. 그에 맞게 header를 작성하셔서 가독성있고 나중에 유지보수에도 좋을 것 같다는 생각이 듭니다. 그러나 나중에 만약 프로젝트의 규모가 커질 경우 form을 관리하는 부분은 다른 컴포넌트와의 관계를 위해 아예 다른 컴포넌트로 분리하는 방안도 좋을 것 같습니다.

3. 반응형 웹

• Responsive web이 과제 필수 내용은 아니었지만 만약 개선하신다면 화면 너비가 줄어들 때에도 input을 작성할 수 있도록 적당한 크기로 줄이는등의 속성을 넣는다면 좋을 것 같습니다.

4. 렌더링 최적화의 사용

• useCallback을 적절히 사용하셔서 함수의 재생성을 막아 렌더링 최적화가 잘 이루어지고 있는 것으로 보입니다. 그러나 만약 setTodos 함수를 사용하실 때 안에 prev => prev.concat() 등을 통해 함수형으로 작성하면 useCallback 함수의 의존성 배열에 들어가는 변수를 작성하지 않아도 됩니다. 즉 빈 배열 [] 로 작성할 수 있게 됩니다. 그러면 todos의 상태 변화에도 불필요한 렌더링을 하지 않기 때문에 함수형태로 작성하시는것도 좋을 것 같습니다 :)

5. 기능 관련 (UX)

• 현재는 빈 데이터를 넣어도 데이터 추가가 빈 텍스트를 이용해 추가가 되는 것 같습니다. UX를 고려해 빈 텍스트로 데이터를 추가한다면 alert를 띄우거나 추가 함수를 동작하지 않게끔 하는 등의 기능을 넣으시면 어떨까 생각이 듭니다.

6. Styling

• 현재 코드에서는 App.js에서 모든 css를 관리하고 계시는 것 같습니다. 그러나 코드의 유지보수를 위해 컴포넌트별로 분리하는것, 또는 props등을 자유롭게 사용할 수 있는 scss나 styled-component를 사용하시는 것도 좋을 것 같습니다 :)

코드가 간결하고 가독성이 좋아 보기에 어려움도 없었고 보면서 배울 점이 많았습니다! 👍 감사합니다!