React

다단계 컴포넌트 구조에서 props를 계속 전달하는 문제가 있었다. React 16.3부터 정식 지원되는 Context API를 도입해서 해결했다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, 불필요한 리렌더링을 방지하는 데 유용했다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, props 비교를 통해 리렌더링을 방지한다. 리스트 렌더링 성능 개선에 효과적이었다.

프로젝트 규모가 작은 경우 Redux 도입이 오버엔지니어링일 수 있다. React 16.3에서 개선된 Context API를 활용해 Redux 없이 전역 상태를 관리한 경험을 정리했다.

React 16.5에서 추가된 Profiler API를 프로덕션 코드에 적용했다. DevTools만으로는 파악하기 어려웠던 실제 사용자 환경의 렌더링 성능을 측정할 수 있게 되었다.

대시보드 프로젝트에서 불필요한 리렌더링으로 성능 이슈가 발생했다. PureComponent와 shouldComponentUpdate를 적용해 렌더링 횟수를 70% 가량 줄인 과정을 정리했다.

Redux를 걷어내고 새로운 Context API로 전역 테마 관리를 구현했다. 보일러플레이트가 확 줄어들어 만족스러웠다.

componentWillReceiveProps가 deprecated되면서 getDerivedStateFromProps로 전환했다. 예상보다 까다로웠던 마이그레이션 과정을 기록한다.

redux-thunk나 redux-saga 없이 컴포넌트 레벨에서 비동기를 처리하는 방식을 시도했다. 프로젝트 규모가 작을 때는 오히려 이 방식이 더 단순했다.

다섯 단계 이상 중첩된 컴포넌트에서 props를 전달하는 게 너무 번거로워졌다. Redux를 쓰기엔 과한 것 같아서 React 16.3에 새로 추가된 Context API를 도입해봤다.