[React] 라이프사이클

리액트는 라이프사이클 매소드가 있는데 이것은, 특정 시점에 원하는 것을 동작하게 하기 위해서 필요한 매소드 이다.

라이프사이클에는 크게 5단계로 나눌수 있는데,

1. constructor
2. render
3. componentDidMount
4. componentDidUpdate
5. componentWillUnmount

로 구분 할 수 있다.

1. constructor
   컴포넌트 실행시 최초로 실행되는 매소드

2. render
   constructor 매소드가 실행되고 나면 render 매소드가 실행이 된다
   render 매소드 실행시 라이프사이클을 모르면 많이 발생되는 error가 있는데, 코드를 작성하면서 가장 많이 보았던 error 였다

   "undefined의 "???"는 읽을 수 없다" 라는 뜻의 에러인데
   TypeError: Cannot read property '0' of undefined
   와 같은 error 를 볼 수 있다.

   이 에러는 3번인 componentDidMount 와 같이 봐야 되는데,
   값이 아직 undefined 인데 그 값에 접근 하려고 하니까 뜨는 error

3. componentDidMount
   render가 완료되면 실행 되는 매소드
   render가 되면, componentDidMount 메소드가 실행되는데, 이때 서버와 통신하기 위한 fetch 함수 같은 것을 실행하게 된다
   componentDidMount 단계에서 fetch 함수를 실행하는 이유로는,
   유저 입장에서는 서버와 통신하는 동안 그냥 빈화면만 보고 있어야 되서
   먼저 일부 render 시켜주고,
   서버에서 데이터를 받고,
   나머지를 state 값 변경됐으면 다시 render

4. componentDidUpdate
   처음 render 될 때 componentDidMount 였다면 그 다음부터는 componentDidUpdate 매소드가 실행
   어떤 값이 변경해서 다시 render 될 때 마다 실행해야 되는것이 있으면 이 매소드를 이용해서 실행 할 수 있다.

5. componentWillUnmount
   다른 페이지로 이동할 때 render 된 것이 지워질때 사용되는 매소드
   다른 페이지로 이동하게 되면 render 된 것이 unmount 될때 실행 되는 매소드 이다
   이름이 will 인것 처럼, 지워지면 이 매소드를 사용 할 수 없기 때문에 지워지기 직전에 함수를 실행 시키고 지워진다고 생각하면 된다.

위의 5단계 라이프사이클을 이해하는 것이 중요한 이유는
특정 시점에서 함수가 실행되는 것을 이해하고, 그 때에 맞게 사용해야 되기 때문이다.

render 시에 서버에서 받아온 데이터가 아직 없어서 에러가 뜬다면 아래와 같이 코드를 작성해서 에러를 방지 할 수 있다.

this.state.value && this.state.value.map(...)

이런식으로 value 값이 있을 때 뒤의 값 출력
이렇게 하면 처음 render 될때에는 값이 false 값이기 때문에 넘어가고,
fetch 함수에서 받아온 값이 state 값을 변경하고,
다시 render 될때 this.state.value 값이 true가 되기 때문에 뒤에 값을 실행 해준다

간단하게

this.state.value?.map(...)

이라고 적어서 사용 할 수도 있다.