[WIL] React Hooks와 컴포넌트 최적화 | 이노베이션 캠프 동북권 - 4주차 회고

🚢 이번 항해는?

이번 주는 프로젝트 두 개와 부족한 부분을 채우기 위한 공부를 하느라 바쁘게 지냈던 것 같다.

리덕스에 익숙해지기 위해 따로 시작했던 프로젝트인 MBTI 웹툰 테스트도 마무리 후 배포했고,

리액트 숙련주차 과제인 나만의 사전 만들기 과제도 기한 안에 끝낸 뒤 배포했다.

 

https://github.com/ddooyn/mbti-webtoon-test

https://github.com/ddooyn/my-dictionary-app-2022

 

간단한 과제인데도 하면서 전반적으로 최적화가 어렵다고 느꼈다.

단어 수정 기능 같은 경우 파이어스토어에는 반영이 잘되는데 리덕스 스토어에 state 반영이 가끔씩 안되어서 리렌더링을 못하는 경우가 생겼다. 또 무한 스크롤을 처음으로 구현해봤는데 쓰로틀링/디바운싱 개념을 더 공부하고 스크롤 관련 코드를 꼭 개선해봐야겠다는 생각이 든다.

 

그리고 redux-toolkit이 기존 redux보다 간편하다고 해서 과제에 사용해보려고 했었다.공식문서와 기술 블로그를 읽으면서 createSlice()와 비동기를 위해 createAsyncThunk() 함수를 사용하려고 새벽 내내 시도해보다가 생각처럼 안되어서 결국 다시 redux와 redux-thunk 조합으로 돌아왔다.

이번에 적용을 못해서 아쉽지만 아직 낯설어서 그렇다는 생각이 들어서 다시 익숙해질 수 있도록 도전해 볼 것이다.

 

📚 책책책!

금요일 리액트 심화주차가 시작되고부터는 지급받은 리액트 심화반 강의를 보기 전, 비동기 프로그래밍에 대해 어렴풋이 알고만 있었는데 더 깊이 공부해보는 시간을 개인적으로 가졌다. 모던 자바스크립트 Deep Dive 책의 42-43, 45-46장을 읽었다.

 

멀티 스레드로 동작하는 브라우저 환경에서 이벤트 루프와 태스크 큐 개념, Ajax의 등장으로 달라진 점, JSON 메서드, 콜백 지옥과 프로미스의 도입, try...catch...finally 후속 처리 메서드, fetch API 및 프로미스를 기반으로 동작하는 async/await 까지의 흐름을 확실히 잘 정돈된 텍스트로 읽고 나니 개념이 더 잡히면서 어떻게 왜 사용하는 것인지에 대한 이해가 깊어졌다.

 

이제 강의를 빠른 시일 내에 완강하고 심화주차 과제인 로그인 사용자용 매거진 사이트 과제도 다음 주 목요일까지 잘 구현해내는 것이 목표다.

 

주말 동안에는 과제로 인해 관심이 생겼던 주제인 컴포넌트 최적화를 더 공부해보고자 리액트를 다루는 기술 책의 7-8장을 읽고, 10-11장을 실습해보았다. 특히 7장 컴포넌트의 라이프사이클 주제를 읽고 리액트 공식문서를 참고해 따로 글을 써보았다.

 

2022.07.16 - [React] - [React] 컴포넌트의 생명주기(Lifecycle)

[React] 컴포넌트의 생명주기(Lifecycle)

 

결국 React Hooks에 대해 잘 이해한 뒤 최적화를 위해 적재적소에 사용하는 것이 핵심이라는 생각이 들어 이 주제에 대해 하단에 추가로 더 정리해 보려고 한다.

 

🎣 Hooks와 컴포넌트 최적화