[React] 라이프사이클
리액트는 라이프사이클 매소드가 있는데 이것은, 특정 시점에 원하는 것을 동작하게 하기 위해서 필요한 매소드 이다.
라이프사이클에는 크게 5단계로 나눌수 있는데,
- constructor
- render
- componentDidMount
- componentDidUpdate
- componentWillUnmount
로 구분 할 수 있다.
-
constructor
컴포넌트 실행시 최초로 실행되는 매소드 -
render
constructor 매소드가 실행되고 나면 render 매소드가 실행이 된다
render 매소드 실행시 라이프사이클을 모르면 많이 발생되는 error가 있는데, 코드를 작성하면서 가장 많이 보았던 error 였다"undefined의 "???"는 읽을 수 없다" 라는 뜻의 에러인데
TypeError: Cannot read property '0' of undefined
와 같은 error 를 볼 수 있다.이 에러는 3번인 componentDidMount 와 같이 봐야 되는데,
값이 아직 undefined 인데 그 값에 접근 하려고 하니까 뜨는 error -
componentDidMount
render가 완료되면 실행 되는 매소드
render가 되면, componentDidMount 메소드가 실행되는데, 이때 서버와 통신하기 위한 fetch 함수 같은 것을 실행하게 된다
componentDidMount 단계에서 fetch 함수를 실행하는 이유로는,
유저 입장에서는 서버와 통신하는 동안 그냥 빈화면만 보고 있어야 되서
먼저 일부 render 시켜주고,
서버에서 데이터를 받고,
나머지를 state 값 변경됐으면 다시 render -
componentDidUpdate
처음 render 될 때 componentDidMount 였다면 그 다음부터는 componentDidUpdate 매소드가 실행
어떤 값이 변경해서 다시 render 될 때 마다 실행해야 되는것이 있으면 이 매소드를 이용해서 실행 할 수 있다. -
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(...)
이라고 적어서 사용 할 수도 있다.
Author And Source
이 문제에 관하여([React] 라이프사이클), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chosh91/React-라이프사이클저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)