생명주기(Lifecycle)
- 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다. 이러한 메서드들을 생명주기 메서드라고 부른다.
- 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다.
- 생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.
컴포넌트가 마운트가 시작될 때 생명주기
- constructor : 생성자 메서드이므로 가장 먼저 실행되는 메서드이다.
- getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용한다. - 특정 객체를 반환하면 state로 설정된다. null 값을 반환하면 아무 일도 발생되지 않는다.
- 컴포넌트의 props나 state가 바뀌어도 메서드가 호출된다.
- 렌더링 중에 state를 바로 업데이트 가능하다.
static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.color !== prevState.color){
return {color: nextProps.color}
}
return null;
}// hooks
function ScrollView({colorProps}) {
const [color, setColor] = useState("");
if (colorProps !== color) {
setColor(row);
}
return `Scrolling down: ${isScrollingDown}`;
}- render : 컴포넌트를 렌더링하는 메서드
- componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드이다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다.DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.
컴포넌트가 업데이트 되는 시점에 생명주기
- getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용한다.
- shouldComponentUpdate : 주로 최적화 할 때 사용하는 메서드입니다. 불필요한 렌더 작업의 취소이다. 이전값과 이후값을 비교하여 같으면 false를 반환하여 리렌더링을 막고 다르면 true를 리렌더링한다.
shouldComponentUpdate(nextProps, nextState){
if(nextProps.color !== this.props.color){
return true
}
return false
}
hook에서 React.memo를 사용하여 리렌더링 방지 가능하지만 state나 props가 변경되면 리렌더링된다. 또한 props만 변경 시 리렌더링 방지한다.
- render : 컴포넌틑를 렌더링하는 메서드
- getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용을 할 수 있다. Hooks에서 대체하는 기능이 아직 없다.
- componentDidUpdate : 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드
컴포넌트가 화면에서 사라질 때 생명주기
componentWillUnmount : 여기서는 주로 DOM에 직접 등록했었던 이벤트를 제거
다음의 코드와 같이 생명주기 메서드들을 이해해 보자
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);- Clock 컴포넌트의 render 함수를 호출하고 DOM을 업데이트한다.
- DOM 업데이트 후 componentDidMount() 생명주기 메서드를 호출한다.
- state 값이 변경되어 업데이트를 계속 진행한다.
this.setState 사용법, 사용해야 하는 이유
state 업데이트는 비동기적일 수 있기 때문에 비동기 처리해주는 setState를 사용하여 state를 업데이트 한다.
state 업데이트 잘못된 예시
this.setState({
counter: this.state.counter + this.props.increment,
});state 업데이트
this.setState((state, props) => ({
counter: state.counter + props.increment
}));참조 : setState 사용하는 이유
State
- 변할 수 있는 값
- 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
- 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다.
- state가 변경되면, 컴포넌트는 리렌더링된다.
props vs state
- props는 외부로부터 전달받은 값
- state는 내부에서 변화하는 값
props
태어날 때 결정되는 것
- 이름
- 성별
state
- 나이 : 해가 바뀌면 한 살씩 나이든다
- 현재 사는 곳 : 이사할 때마다 다르다
- 취업 여부
- 결혼/연애 여부
