State와 Life Cycle 🍀 찬란하던 컴포먼트의 인생 🍀
state
state란 props와 다르게 자식 컴포먼트로 전달이 되는 것이 아니라 객체 형태로 컴포먼트에 저장되어 연결된 컴포먼트끼리 정보를 공유하는 것을 말합니다. 이렇게 될 경우 사용하고 가공하는 컴포먼트와 구현하는 컴포먼트가 나누어지는 장점이 있습니다.
사용방법은 class 안에 constructor과 super를 선언하고 this.state를 쓰는 형태로 되어있습니다.
class App extends React.Component {
constructor(props) {
super(props);
this.state={
user : '임코딩'
}
}
render() {
return (
<div user={this.state.user}
</div>
);
}
}
위와 같이 props로 state를 넘겨줄 경우도 있고, 특정 함수를 넘겨서 부모 컴포먼트에서 state의 상태 변화를 유도할 수 있습니다. # props에서는 바로 setState로 상태변화를 하는 것은 금기이니 이전 React 포스트를 참고해주세요 :)
Life Cycle
react life cycle은 컴포먼트의 생명주기로 생성, 변화, 삭제 단계에서 특정 매소드를 자동적으로 실행하는 것을 말합니다.
먼저 생성단계에서 보면 constructor로 새로운 state가 만들어질 때, componentDidMount의 매소드 안에 있는 함수들이 작동하게 됩니다. 이때 위 매소드는 화면 랜더링이 끝난 이후에 적용되기 때문에 타이머를 맞춰서 활용하는 방법도 있습니다.
coponentDidUpadate는 New props, 부모 컴포먼트로부터 새로운 props를 받거나 , setState로 state 값이 바뀌거나 , forceUpdate로 새롭게 페이지를 랜더링하게끔 유도가 될 때 랜더링 이후에 실행하게 됩니다. 그렇기 때문에 이 매소드 안에 setState와 같은 함수를 사용하게 된다면 변화로 인해서 랜더링이 무한하게 반복되는 지옥을 맛 볼 수 있으니 조심해야합니다.
coponentWillUnmount는 컴포먼트가 삭제될 때 실행이 되는 것으로 네트워크 요청, 타이머 이벤트 등 지속적으로 이루어지는 이벤트들을 해제하는데 유용하게 사용됩니다.