[Week 7-1] 리액트 생명주기(Life Cycle)에 대하여

BossTeemo·2024년 7월 3일

목록 보기

12/15

리액트 생명주기(Life Cycle)에 대하여

리액트(React)는 컴포넌트 기반의 자바스크립트 라이브러리로, 각 컴포넌트는 특정한 생명주기(life cycle)를 가집니다. 생명주기는 컴포넌트가 생성되고, 업데이트되며, 소멸되는 과정을 설명하는데, 이는 개발자가 특정 시점에 원하는 작업을 수행할 수 있도록 도와줍니다. 이 글에서는 리액트 컴포넌트의 생명주기에 대해 자세히 알아보겠습니다.

리액트 생명주기 개요

리액트 컴포넌트의 생명주기는 크게 세 단계로 나눌 수 있습니다:
1. 마운트(Mounting)
2. 업데이트(Updating)
3. 언마운트(Unmounting)

각 단계는 여러 생명주기 메서드로 구성되어 있으며, 이 메서드들은 특정 시점에 자동으로 호출됩니다.

1. 마운트(Mounting)

마운트 단계는 컴포넌트가 생성되고, DOM에 삽입되는 과정을 말합니다. 이 단계에서 호출되는 주요 생명주기 메서드는 다음과 같습니다:

constructor():
- 컴포넌트가 처음 생성될 때 호출됩니다. 상태(state)를 초기화하고, 이벤트 핸들러를 바인딩하는 등 초기 설정 작업을 수행합니다.
```
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
}
```
static getDerivedStateFromProps(props, state):
- props에서 파생된 state를 생성하는 메서드입니다. 이 메서드는 컴포넌트가 마운트되기 전과 업데이트되기 전에 호출됩니다.
```
static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
        return { value: nextProps.value };
    }
    return null;
}
```
render():
- 실제 DOM 구조를 반환합니다. 필수 메서드이며, JSX를 반환합니다.
```
render() {
    return <div>{this.state.count}</div>;
}
```
componentDidMount():
- 컴포넌트가 DOM에 삽입된 직후 호출됩니다. 이 시점에 DOM 노드에 접근하거나, 네트워크 요청을 보내는 등의 작업을 수행할 수 있습니다.
```
componentDidMount() {
    // 데이터 로드 등 초기화 작업
}
```

2. 업데이트(Updating)

업데이트 단계는 컴포넌트의 상태(state)나 속성(props)이 변경될 때 발생합니다. 이 단계에서 호출되는 주요 생명주기 메서드는 다음과 같습니다:

static getDerivedStateFromProps(props, state):
- 앞서 설명한 바와 같이, props에서 파생된 state를 생성하는 메서드입니다.
shouldComponentUpdate(nextProps, nextState):
- 컴포넌트가 업데이트될지 말지를 결정합니다. 기본적으로 true를 반환하며, 성능 최적화를 위해 특정 조건에서 false를 반환할 수 있습니다.
```
shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
}
```
render():
- 상태나 속성이 변경되면 다시 호출됩니다. 새로운 JSX를 반환하여 DOM을 업데이트합니다.

getSnapshotBeforeUpdate(prevProps, prevState):

실제 DOM이 업데이트되기 직전에 호출됩니다. 이 메서드는 스크롤 위치와 같은 DOM 정보를 캡처하는 데 유용합니다.

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
        return this.listRef.scrollHeight;
    }
    return null;
}

componentDidUpdate(prevProps, prevState, snapshot):
- 컴포넌트가 업데이트된 후에 호출됩니다. 이전의 props와 state, 그리고 getSnapshotBeforeUpdate에서 반환한 값을 인수로 받습니다.
```
componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
        this.listRef.scrollTop = this.listRef.scrollHeight - snapshot;
    }
}
```

3. 언마운트(Unmounting)

언마운트 단계는 컴포넌트가 DOM에서 제거되는 과정을 말합니다. 이 단계에서 호출되는 주요 생명주기 메서드는 다음과 같습니다:

componentWillUnmount():
- 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 이 메서드에서는 타이머를 정리하거나, 네트워크 요청을 취소하는 등의 정리 작업을 수행합니다.
```
componentWillUnmount() {
    clearInterval(this.timerID);
}
```