[투두리스트/ React] React Hook을 이용한 렌더링 최적화

기존에 만들었었던 투두리스트에 추가적인 react hook들을 배우며 렌더링 최적화를 겸해 공부할겸 코드를 정리했다. (큰 프로젝트는 아니지만 프로젝트가 커질 수록 중요한 부분이라 연습겸...!!)1. useCallback, useReducer, React.memo 활용  기존 코드 (useState 사용)기존에는 useState를 사용하여 상태를 관리했으며, 상태가 변화할 때마다 컴포넌트가 불필요하게 리렌더링되는 문제가 있었습니다. 특히, 자식 컴포넌트들에 props를 전달할 때마다 함수가 새로 생성되어 렌더링 최적화가 어려운 상황이었습니다.변경된 코드 (useReducer, useCallback, React.memo 사용)이제 useReducer로 상태를 관리하고, 상태에 따라 다른 처리를 switc..

• format_list_bulleted Study/PROJECTS
• · 2025. 3. 25.

[투두리스트/ React] 수정 기능 추가

투두리스트를 추가하고 삭제, 검색 기능까지 다 만들어두고 나니 뭔가 아쉬워서 좀 더 추가해봤다. 투두를 적어두고도 맞춤법 하나가 틀렸다든가 내용을 수정해야 할 때마다 지우고 새로 만드는 것보다 UI를 추가하는게 훨씬 편리하니까! 그런데 넣다보니 하나씩 뭐가 부족하고... 뭐가 이상하고... 그래서 차근차근 하나씩 추가했고, 작업 순서대로 글을 작성해봤다. 1. Todo 수정 기능 추가하기수정 버튼을 클릭하면 "수정 모드"로 변경input 필드를 활성화 해서 내용을 수정 가능하도록 변경저장 버튼을 따로 만들지 않고, 같은 버튼을 다시 누르면 저장 & 수정 모드 종료// react// App.jsx -> List.jsx -> TodoItem.jsx 로 전달한다.// 수정중이라면 true, 아니라면 false..

• format_list_bulleted Study/PROJECTS
• · 2025. 3. 2.