김민태의 데브캠프 2기 - useCallback을 활용한 함수 최적화

원래 컴포넌트가 랜더링 될 때 그 안에 있는 함수도 다시 만들게 되는데, 똑같은 함수를 계속 다시 만드는 것은
비 효율적이다.

예시 코드를 통해 결과를 확인해보자.

우선 리랜더링 되는 함수를 생성하고,  

 

export const B = React.memo(({message, posts}) => {
  console.log('B component is Rendering');
  const testFunction = () => {};
  return (
    <div>
      <h1>B Component</h1>
      <Message message = {message}/>
      <List posts = {posts} />
    </div>
  )
})

 

텍스트 입력을 통해 콘솔을 확인해보면 .. B 컴포넌트만 랜더링 되는 것을 확인할 수 있다.

 

 

 

그 다음은 props로 tsetFunction 함수를 넘겨보자,

const List = React.memo(({posts, testFunction}) =>{
  console.log('List component is Rendering')
  return (
    <ul>
      {posts.map(post => (
        <ListItem key = {post.id} post = {post}/>
      ))}
    </ul>
  )
})

 

위 사진은 처음 설명한 자녀 컴포넌트도 같이 랜더링 되어, 똑같은 함수를 계속 만드는 과정이다.

이것을 해결하는 것이 useCallback이다.

useCallback은 메모이제이션된 함수를 반환하는 함수이다.
적용 방법은 다음과 같다

  const testFunction = useCallback(() => {}, []);

 

함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가하면 된다.

useCallback으로 인해 의존성 배열에 추가해준  state 혹은 props가 변하지 않는한 함수는 새로 생성되지 않는다.

의존성 배열에 아무것도 없다면 컴포넌트가 최초 랜더링 시에만 함수가 생성되며 그 이후에는 동일한 참조 값을 사용하는 함수가 된다.

 

실행 결과는

 

위 진과 같이 입력시 B 컴포넌트만 랜더링 되는 것을 확인할 수 있다.