[React.js] React.js 7편 LifleCycle2

LifleCycle2

---

전시간에는 라이프 사이클에는 무엇이 있나 알아보았고 이번에는 실제로 코드로 활용해보겠다. 

컴포넌트 처음생성

constructor(props)

이건 뷰를 만들 때 처음실행되는 코드인데 사용법은 

constructor(props){

super(props);

}

props를 인자로 받아서 실행되며 상속하고 있는 Compoment에 super와 함께 props를 전달해준다. 밑에는 자기가 작성하고 싶은 코드를 마음대로 작성하면 된다. 

componentDidMount

이건 컴포넌트가 만들어진 후에 호출되는 함수이다. 이함수는 주로 외부라이브러리랑 연결하거나 필요한 데이터를 요청하기 위해 ajax, DOM의 속성등을 읽는다. 당연하게 constructor뒤에 사용된다. 

componentDidMount(){

console.log('DidMount');

}

컴포넌트 업데이트

static getDerivedStateFromProps(nextProps, prevState)

이함수는 받아온 props를 state와 동기화 하기위해서 사용한다. 

static getDerivedStateFromProps(nextProps, prevState){

if (nextProps.value !== prevProps.value){

return {

    value:nextProps.value

        }

    }

}

shouldComponentUpdate(nextProps, nextState)

이함수는 끝에 렌더링을 해줄지 말지 결정하는 함수이다.  이함수는 component를 최적화 해주는데 엄청난 도움을 주며 rendering을 해줄필요가 없을 때는 하지 않을 기능을 준다. 

shouldComponentUpdate(nextProps, prevProps){

if(nextProps.value === 10)return false;

return true;

}

false면 렌더링을 해주지 않고 true면 렌더링을 해준다. 우리가 따로 정의해주지 않으면 true라고 정의되어있다.  

componentDidUpdate(prevProps, prevState, snapshot)

이함수는 render가 호출되고 나서 실행되는 함수입니다. 이상태에선 props, state등이 변해있고 prevProps, prevState등을 참조할 수 있다. 

컴포넌트 제거

컴포넌트가 제거될 때 사용됩니다. 

componentWillUnmount(){

console.log('bye');

}

에러 속출하기 

componentDidCatch

1.일단 고의로 에러를 발생시켜보자!!

{this.props.asd.asdasd}

2. 그리고 props를 전달해주는 상위 클래스에 이런식으로 만들어주자.

componentDidCatch(error, info){

console.log(error);

console.log(info);

}

그럼 console 창에 이런식으로 뜨게된다. 이런것을 뷰로 전달해주거나 서버로 전달해주어서 개발자들에게 보여줄 수 있을 것이다. 

사용자에게 보여줄 에러화면 만들기 우선 state에 에러를 false로 추가해준 후 에러가 발생한다면 componentDidCatch에서 setState를 활용해서 error값을 true로 바꾸어주면 밑 화면이 보일 것이다. 

if(this.state.error){

return (<div>

에러가 발생했어요!!!

</div>);

}