LifeCycle api

자세한 것은

https://react-anyone.vlpt.us/05.html 를 참고하자

 

Mounting API

constructor
 컴포넌트 처음 만들어질 때 호출되는 함수

 constructor(props) {
   super(props); //Componenet 의 생성자 함수를 호출

 }

componentDidMount
 외부 라이브러리 연동 or 컴포넌트에 필요한 데이터 요청
 DOM 에 관련한 작업들 


Update API
static getDerivedStateFromProps()

props 로 받아온 값을 state 로 동기화 해주는 작업을 해주고 싶을 때 사용
ex. 부모 Componenet의 특정 값 (ex. state) 을 자식 Component 의 state 랑 똑같이 만들어
주고 싶을 때

shouldComponentUpdate
렌더링 여부를 결정하게 해 줄 수 있음
최적화에 사용

getSnapshotBeforeUpdate
update 되기 전 상태의 dom 상태를 받아서 componentDidUpdate 에서 인자로 받을 수 있음

스크롤 위치 기억하게 해주는 데 사용할 수 있음
ex) getSnapshot 에서 스크롤 위치를 기억해놨다가,
    componentDidUpdate 에서 스크롤 위치 인자로 받아서 업데이트되고 난 후 업데이트 되기 이전 스크롤 위치로 다시 세팅해줄 수 있음

 

 

componentDidUpdate 

 component 가 업데이트 된 후에 호출되는 함수

 

 

Unmounting API

 

componentWillUnmount

  component 가 삭제될 때 호출되는 함수

 

 ex) <div>

{this.state.counter < 10 && <MyComponent value={this.state.counter} />}

</div>

 

여기서 counter 가 10 이 되면 MyComponent 가 사라지고 , 이 때 해당 api 가 호출됨

 

 

Error API

 

componentDidCatch

 에러를 catch

 에러가 발생할 수 있는 component 의  부모에다가 작성해줘야 함

 

보통 아래와 같은 형식으로 쓸 수 있음

1. error 발생하면 didCatch 에서 인지해서 error state 을 true 로 변경

2. render 에서 state.error 가 true 일 경우 사용자에게 경고 메시지 출려하도록 함

state = {

counter: 1,

error : true

};

//error : 어떤 에러가 발생했는디

//info : 에러가 어디서 발생했는지

 componentDidCatch(error,info) {

  console.log(error);

  this.setState({

    error: true;

 })

 

}

 

if(this.state.error) {

 return (

    <div>에러 발생</div>

  )

}

 

 

react 하기 위해 필요한 것

 

node.js -> node.js 를 직접 쓰진 않음.  그러나 react 를 하기 위한 웹펙, 바벨이 node.js 를 필요로 하기때문에 설치해야 함