Life Cycle

기본적인 라이프 사이클

class App extends Component{
	constructor(){
    }
  
  	componentDidMount(){}
  
  	componentDidUpdate(){}
  
  	render(){
    
      return(
      
        <div>
        </div>
      )
    }
}

클래스형 컴포넌트의 기본적인 구조가 위와 같다면

1. constructor
2. render
3. componentDidMount -> fetch 완료
4. render
5. componentDidUpdate

순으로 돌아간다.

만약 위의 컴포넌트가 자식 컴포넌트를 가지고 있다면

1. 부모 constructor -> render
2. 자식 constructor -> render
3. 자식 componentDidMount
4. 부모 componentDidMount
5. 자식 componentDidUpdate
6. 부모 componentDidUpdate

순으로 돌아간다.

컴포넌트의 라이프 사이클을 염두에 두지 않고 함수를 작성 했을 때 에러가 나는 경우가 있기 떄문에 코드를 작성할 때 고려되어야 할 사항이다.

개인적으로 자식 컴포넌트에서 맵을 돌렸을 때 Cannot read property 'map' of undefined 와 같은 오류가 발생한다면 라이프 사이클이 이유였던 경우가 대부분이었다. fetch가 완료되기 전에는 데이터가 없는 상태에서 map을 사용했기 때문에 발생한 에러이다.

조건부 렌더링

위와 같은 문제를 해결하기 위해서는 조건부 렌더링을 사용하면 된다.

{data && arr.map(el=>console.log(el))}
// 데이터가 있을 때만 맵이 돌아갈 수 있게 조건을 걸어줌 data는 componentDidMount를 통해 가져온 데이터

맵을 사용하기 전에 앞에 저런 식으로만 적어주면 되기 때문에 방법도 쉬웠다.

자바스크립트가 기본적으로 동기이기 때문에 위에서부터 아래로 코드가 작성된 순서대로 실행되지만 componentDidMount같은 비동기 함수들은 다른 동기 함수들이 실행되고 나서 실행 되기 때문에 마지막에 실행된다고 한다. 이것만 이해하고 있으면 부모-자식 관계를 가진 컴포넌트들의 비동기 함수 실행 순서만 기억하면 될것 같다.

부모부터 시작해서(constructor render) 자식으로 갔다가 (constructor render) 다시 자식에서 부모로 (componentDidMount)