리액트 라이프사이클

jsx에서는 if나 for을 사용할 수 없지만 함수 안에서는 가능하다.

return (
	<>
    {(() = > {
     
     
     if(result.lengh === 0){
     
     return null;
     }else {
      return <div>hi</div>
     }
    
    })()}
    
    </>




)

다만 함수를 즉시 실행 함수로 만들어야 한다. 이렇게 하느니 차라리 분리하는 것이 좋을 듯합니다.

반복문 역시 함수 안에서 사용할 수 있습니다.

 

리액트 Component사용시 react dev-tools를 이용해 성능 체크를 한 다음 pureComponent로 넘어가는 것이 좋습니다.

 

 

componentDidMount는 처음 렌더링이 성공적으로 실행이 됐다면 실행됩니다 리 렌더링 시에는 실행되지 않습니다.

리 렌더링 시에 호출되는 함수는 componentDidUpdate입니다.

부모가 자식 컴포넌트를 삭제할 시 componentWillUnmount는 자식 컴포넌트가 제거되기 직전에 실행되는 함수입니다.

 

총정리  

Class인 경우 -> constructor -> render -> ref -> componentDidMount -> setState or props 변경 시 -> shouldComponentUpdate -> render ->componentDidUpdate -> 삭제 시 componentWillUnmount 소멸

 

componentDidMount() { //첫렌더링이후 실행 

비동기 요청을 많이합니다.

}

componentWillUnMount(){

컴포넌트가 제거되기 직전, 비동기 요청 정리를 합니다.

}

componentDidUpdate() {
 
 리렌더링후 실행

}

 

hooks는 리액트의 라이프사이클이 존재하지 않는다. 

 

useEffect( () => {  //componentDidMount , componentDidUpdate 역할 

 return () =>{ //componentWiilUnMount 역할
 }

}, [])

두 번째 인수 배열에 넣은  값들이 변경될 때 useEffect가 실행됩니다.

useEffect는 state마다 다른 effect를 주고싶은경우 여러 번 작성할 수 있습니다.

class인 경우에는 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리합니다.

그렇기에 여러 컴포넌트를 세세히 분리해야 코드의 복잡성을 막을 수 있습니다.

 

즉 클래스에서의 리액트 라이프사이클은 어떠한 state가 변경되었을 때 해당되는 라이프사이클이 실행되지만

hooks에서 useEffect는  [] 안의 state가 변경되었을 때마다 실행되는 라이프 사이클입니다.

 

리액트 메서드 안에 함수를 호출하는 경우  onCilck={(e) => this.onClickBtn}

onClickBtn = () => (e) => {

} 

다음과 같이 변경한 뒤 onClick={this.onClickBtn}으로 변경해줄 수 있다.

 

hooks경우 부모 컴포넌트가 변경되면 자식 컴포넌트까지 리 렌더링 되는 경우가 발생합니다 props의 변경 그러므로 memo를 통해 리 렌더링을 막을 수 있습니다.