[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 8일차

 

8일 차인 오늘은 useReducer와 Memoization을 활용한 React.memo, useCallback를 사용해 TodoList 적용해 보는 실습을 진행했다. useState → useReducer 변경해서 컴포넌트 외부에서 상태변화 함수를 정의해 상태를 관리하는 방법을 학습했다. 

 📚 학습한 내용
- 과제 Todolist 기능 리뷰
- Todolist 최적화
- useReducer
- Context API
- Express 이용한 sever 실습

 

Props Drilling의 해결하는 방법 중 하나인 Context API를 활용해 전역적으로 상태를 공유할 수 있는 방법 또한 학습할 수 있었다. Context API는 useReducer와 함께 사용해야 더 유용하다. Context API는 Props Drilling을 해결하는 근본적인 해결책은 아니다. 상태가 변경되면 컴포넌트의 불필요한 리렌더링 상황이 발생하므로 꼭 최적화와 함께 진행해주어야 하기 때문에 더 나은 방법으로는 전역적으로 상태를 관리할 수 있는 라이브러리 Redux, recoil, zustand 등.. 라이브러리를  사용하는 방식이 더 많이 사용된다. 그래도 실무에서 사용할 수도 있기 때문에 꼭 알아두어야 하는 개념이다. 

 

🔗  GitHub

학습 내용 정리

 

👩🏻‍💻 학습을 통해 느낀 점 

 

오늘은 개념을 배우면 TodoList 적용해 보는 실습하는 시간들이 많아 개념을 정리하기보다는 복습으로 TodoList 다시 만들어보았다. github에 복습과정을 기록해 두었다. 구현과정을 글로 쓴다는 게 생각보다 쉽지 않았다. 복습하면서 등록한 힐일 내용을 수정할 수 있는 버튼과 기능을 추가해 보았다. 배운 내용 토대로 응용해보고 싶었다. 배운 개념을 적용하려고 시도해 보는 게 중요하다. 이번 학습을 통해 TodoList를 되게 다양한 방식으로 만들어 보게 되었다. useState를 사용하는 방식, useReducer + ContextAPI 활용하는 방식, 내일은 zustand를 활용한 방법을 학습한다. 기대된다. zustand를 사용법 익히고 싶었는데, 강의가 없어서 공식문서를 보면서 사용해 보긴 했지만 내가 사용하는 방식이 맞는지 의구심을 가지고 있었는데 배울 수 있는 기회가 생겨 기쁘다! 

 

TodoList 수정버튼 기능 구현

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정