[패스트캠퍼스] React 강의 8주차

내일배움카드를 통해 리액트 리덕스 강의 마지막 주차다.

마지막 주차 강의에서는 성능개선을 위해 어플리케이션을 만들었다.

성능을 체크할 때 구글에 프로파일러와 하이라이트를 통해 성능을 체크할 수 있었다.

이것은 구글 확장프로그램이어서 깔고 쓸 수 있다!

 

 

프로파일러와 하이라이트를 사용하면 내가 입력할 때마다 반짝이는 것을 볼 수 있다.

이 부분은 하이라이트를 체크해야 볼 수 있는 부분이다.

A, B 컴포넌트를 각각 만들 때 A컴포넌트는 한 번에 만들었고 B는 쪼개서 만들었다.

쪼개서 만들었을 때 성능이 더 좋지않을까? 싶지만 그것도 아니다.

오히려 불필요한 곳에서 리렌더링이 일어나 좋지 않을 수 있다.

따라서 React.memo를 이용해 성능을 최적화 시킬 수 있다.

 

React.memo로 래핑될 때 리액트는 컴포넌트를 렌더링하고 결과를 메모이징한다.

그리고 다음 렌더링이 일어날 때 props가 같으면 React는 메모이징 된 내용을 재사용한다.

메모이징한 결과를 재사용하면서 리액트에서 리렌더링을 할 때 가상 돔에서 달라진 부분을 확인하지 않아 성능상 이점을 누릴 수 있다.

 

그렇다면 언제 React.memo()를 사용할까?

1. 같은 props로 렌더링이 자주 일어나는 컴포넌트

- 같은 props에 같은 렌더링 결과를 제공한다. 

- 이것을 사용하기 가장 좋은 케이스는 함수형 컴포넌트가 같은 props로 자주 렌더링 될 것이라 예상될 때이다.

 

만약 이 상황과 일치하지 않으면 사용할 필요는 없다.

렌더링될 때 props가 다른 경우가 대부분인 컴포넌트를 볼 때 메모이제이션 기법의 이점을 얻기 힘들다.

props가 자주 변하는 컴포넌트를 React.memo()로 래핑해도 리액트는 두 가지 작업을 리렌더링 할 때마다 수행할 것이다.

 

결과적으로 React.memo()는 함수형 컴포넌트에서도 메모이제이션의 장점을 얻게하는 훌륭한 도구이다.

올바르게 적용한다면 변경되지 않은 동일한 props에 대해 리렌더링을 하는 것을 막을 수 있다.

 

다만, 콜백함수를 props로 사용하는 컴포넌트에서 주의해야 한다. 같은 렌더링을 할 때 이전과 동일한 콜백 함수 인스턴스를 넘기는지 확실히 알아야 한다. 

마지막으로 메모이제이션의 성능상 이점을 측정하기 위해 꼭! 프로파일러를 사용해야한다.

 

리덕스

리덕스도 상태관리 라이브러리이다. 

한 방향으로 흐르기 때문에 데이터 흐름을 예측하기 쉽다. 관리하기도 용이하다.

특히 함수형 프로그래밍을 따라서 데이터가 불변해도 예측하기 쉽고 이전 상태로 되돌리기도 좋다.

리덕스는 모든 것을 state(상태)로 관리한다. 리액트에서 리덕스 패턴을 사용할 수 있게 해주는 react-redux 패키지가 있다.

리덕스 패턴은 처음 배웠을 때 좀 어려운 것 같다.

이 부분은 강의를 다시 듣고 다시 복습해봐야 할 것 같다.