[React JS] 이전 props/state와 비교하여 조건부 렌더링 하기: componentDidUpdate(prevProps, prevState)

자주 변하는 state와 props.

state나 props의 종류가 많아지는데도 componentDidUpdate를 남용하면

매 렌더링마다 호출되기 때문에 성능에 영향을 줄 수 있다.

loading과 같은 자주 변하지만, 매번 전 상태와 비교해주어야 하는 변수에 대해 조건부 렌더링을 하기 위한 방법이 이미 있었다!!! 

 

일반적으로 이전 props와 차이 여부를 확인하고 state를 세팅하고자 할 때 prev 매개변수를 쓴다

코드를 바로 보자.

class TestPrevProps extends React.Component{

  componentDidUpdate(prevProps) {
  
      const { loading: prevLoading, name: prevName } = prevProps;
      const { loading, name } = this.props;

      if(prevLoading && !loading){
      	console.log('생략할게요')
      }

      if(prevName !== name){
      	this.setState({name: name})
      }
   }
   
   ...

 }

• componentDidUpdate의 인자로 prevProps를 사용한다.
  • 인자는 (prevProps, prevState, snapshot) 순서이다.
• TestPrevProps 컴포넌트가 가 부모 컴포넌트에게 넘겨받는 Props는 { loading, name, ...} 이다.
• const { loading: prevLoading, name: prevName } = prevProps;
  • 이전 props의 loading과 name을 prevLoading과 prevName의 const 변수에 저장.
• if(prevLoading && !loading) ~~
  • 이전 loading props가 true고, 현재 loading props가 false일 때, if문 바디가 실행된다.
•  if(prevName !== name) ~~
  • 이전 name props가 현재 name props와 다를 때 (name props의 업데이트가 발생하면) if문 바디가 실행된다.

 

기존의 co mponentDidUpdate는 컴포넌트 생명주기 메소드의 하나이며,

componenntDidMount(최초 렌더링에만 호출) 만큼이나 자주 쓰인다.

오랜만에 정리를 해보자면,

 

componentDidUpdate

• 클래스형 컴포넌트의 최초 렌더링을 제외한 매 갱신 직후에 호출됨.
• 내부에서 setState를 잘못 사용하면 렌더링 무한 반복이 된다! 따라서 조건문 필수!
  • 렌더링 -> componentDidUpdate 호출 -> setState -> 렌더링 -> ........ 이 무한반복!!