react 최적화 1탄 useMemo에 이어 오늘은 useCallback과 React.memo를 다뤄보겠습니다
2. useCallback
useCallback( ( ) => { return method } , [item] )
useMemo가 값을 메모이제이션한다면 useCallback은 함수를 저장합니다. useMemo와 같이 의존성 배열이 변경할때만 저장된 함수값을 업데이트 합니다
useCallback 사용 예시
이번 예시는 name state가 변경될때마다 비동기 통신을 해서 데이터를 받아오는 asyncFunc 함수가 있고 해당 함수가 변경될때만 콘솔에 알려주는 코드가 있습니다. 그리고 위와 무관한 기능인 num state를 변경하는 버튼이 있습니다.
지난 useMemo때와 동일하게 함수또한 객체이기때문에 본인과 무관한 상태변화가 일어나도 업데이트가 다시 발생해서 원치않는 코드가 실행되는 상황입니다.
위와 같은 코드를 실행하면 num state가 변경될때마다 콘솔에 asyncFunc update 라고 찍히겠죠.
이런 상황을 해결하기위해선 useCallback으로 함수를 감싸주면 됩니다. 의존성 배열에 아무것도 안넣었기때문에 여기선 렌더링될때만 업데이트되고 그뒤론 변경되지않습니다.
useMemo는 return 해주는 값이 있을때 , useCallback은 메소드 자체를 메모이제이션 하고싶을때 사용하는 차이가 있고 사용법 자체는 비슷하다고 볼 수 있네요
3. React.memo
React.memo 는 컴포넌트를 인수로 받아서 최적화된 컴포넌트로 만들어 반환하는 메소드입니다. 해당 컴포넌트는 Props를 기준으로 메모이제이션됩니다. 즉 React.memo를 사용하면 props가 바뀌지않으면 부모 컴포넌트가 리렌더링된다해도 자식컴포넌트가 리렌더링되지않습니다.
export default memo(컴포넌트);
** 컴포넌트를 React.memo로 감싸더라도 컴포넌트 내에서 useState, useReducer와 같이 상태와 관련된 훅을 사용한다면 props에 변화가 없더라도 다시 렌더링됨
React.memo 사용 예시
아래 코드는 수학과 영어수업을 듣는 학생수를 체크하는 프로그램입니다. 여기서 부모컴포넌트에는 각각 수학,영어를 듣는 학생수를 관리하는 state가 있고 자식컴포넌트에 props로 해당 state와 상태변경함수가 전달됩니다.
부모 컴포넌트
자식 컴포넌트
웹 화면
그리고 학생수와 상관없는 isOpen이라는 state가 있는데
여기서 isOpen을 변경하게되면 부모컴포넌트가 렌더링됐기때문에 자연스럽게 자식컴포넌트 또한 렌더링이 되어서 자식컴포넌트에 작성한 콘솔이 입력 됩니다 이때 React.memo를 사용하게되면 불필요한 상황을 방지할수있습니다
다음과 같이 자식 컴포넌트를 memo로 감싸게되면 이제 부모컴포넌트에서 props로 전달받는 값 외의 다른 상태값 변경에 반응하지않습니다.
useMemo, useCallback, React.memo를 모두 활용한 예시
해당 예시에서는 위에서 활용한 출석부 프로그램을 응용해서 useMemo, useCallback, React.memo 를 모두 활용해 보겠습니다
위의 프로그램에 전체 학생수를 체크하는 state가 추가되었고
자식컴포넌트에 전체 학생수를 구하는 메소드(checkTotal)를추가하였고 또한 자식컴포넌트에서 선생님 이름을 보여주기위한 데이터를 객체형태로 전달해보겠습니다
부모컴포넌트
자식 컴포넌트
자식컴포넌트에는 React.memo를 활용해서 컴포넌트를 감싸고 있기때문에 props외의 값인 isOpen이 변경되어도 렌더링이 안될꺼라고 생각할수있지만 새로 전달받은 checkTotal,teacher 모두 객체이기때문에 효과가 없음을 알수 있습니다.
checkTotal은 메소드기때문에 useCallback을
teacher는 객체형태의 값이기때문에 useMemo를 사용하면 해결됩니다
이런식으로 객체 값과 메소드를 최적화해주면 불필요한 리렌더링을 방지할수있습니다.
