인프런 커뮤니티 질문&답변

와이키키키님의 프로필 이미지
와이키키키

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

10.3) React.memo와 컴포넌트 렌더링 최적화

React.memo / useEffect 차이점,쓰는 용도

작성

·

852

1

안녕하세요. 정환님

수업내용 중 궁금한게 있어서 글을 씁니다.

이전에 useEffect를 사용하여, 적용했을때도 똑같은 결과값이 나오는데,

React.memo로 고차함수를 이용해 만드는 것보다, useEffect에 [] 값을 넣어서 사용해주는게 더 간단하고 쉬워보이는데.. React.memo와 useEffect의 차이점이나, 쓰이는 용도가 따로있나요?

두개의 차이점이 있는지 확인부탁드립니다.

const CounterB = ({obj}) => {
  useEffect(()=>{
    console.log(`CounterB Update - count : ${obj.count}`)
  }, [obj.count])
  return <div>{obj.count}</div>
}

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

React.memo는 컴포넌트가 불 필요한 상황(Props가 변화하지 않는 상황)에 리렌더 되지 않도록 만들어

리액트 앱의 전반적인 성능 최적화를 이끌어 내기 위해 사용하는 고차함수입니다.

useEffect는 컴포넌트에 어떤 변화가 일어났을때 (State값이 변경되거나, Mount되거나, Update 되거나 등) 특정 함수를 실행시켜주는 Hook입니다.

따라서 두 함수는 사용 용도가 다릅니다.

와이키키키님의 프로필 이미지
와이키키키

작성한 질문수

질문하기