[클라우딩 어플리케이션 엔지니어링 TIL] 240220 - 프로젝트 최적화, 감정 일기장 프로젝트 복습

Intro

---

오늘은 프로젝트 최적화하는 과정을 실습했다.

생각보다 렌더링 할 필요 없는 컴포넌트들이 계속 렌더링 되는 경우가 많았다.

개발할 때 불필요한 렌더링이 발생하지 않게 신경을 써야겠다.

 

 

 

오늘 학습한 내용

---

프로젝트 최적화

Chrome 개발자 모드에서 React Developer Tools의 Components를 선택 후

'Highlight updates when components render.' 를 체크하여 업데이트 될 때 렌더링되는 컴포넌트를 찾을 수 있다.

 

 

렌더링 될 필요가 없는 컴포넌트들이 렌더링 되는 경우를 찾아 React.memo 등으로 렌더링되지 않게 프로젝트 최적화를 진행한다.

 

• state 값을 바꿀 때 useCallback을 사용하지 않고 바로 헨들러에 상태변화 함수 자체를 전달하면 렌더링이 일어나지 않는다.

const [sortType, setSortType] = useState('latest');
const [filter, setFilter] = useState('all');

return (
  ...
  <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} />
  <ControlMenu value={filter} onChange={setFilter} optionList={filterOptionList} />
  ...
)

 

 

 

 

 

 

 

 

마무리

---

감정 일기장 프로젝트가 마무리 되어가는 시점에서 강의를 보지 않고 직접 구현하며 복습하고 있다.

피그마 복습할 겸 피그마로 직접 디자인도 해보았는데 생각보다 어렵고 시간도 오래 걸렸다.

그래도 혼자 이렇게 구현해보는 과정에서 또 많은 것을 배운 것 같다.