React class component 라이프사이클 함수

1. constructor 함수

 - 생성자 함수로서 클래스 컴포넌트에서 State를 사용하지 않아 State의 초깃값을 설정할 필요가 없을때는 생략 가능

  ex)

constructor(props: Props) {

    super(props);

    this.state = {

        counter: 0,

    };

}

 - 생성자 함수는 해당 클래스 컴포넌트가 생성될 때에 한 번만 호출된다.

 

2. render 함수

 - render 함수는 클래스 컴포넌트의 화면 표시부분을 정의하는데 사용

 ex)

render() {

const { counter } = this.state;

return (

    <Container>

        <Title>Counter App</Title>

        <Contents>

            <Button label="-" onClick={this.sub} />

            <Label data={counter} />

            <Button label="+" onClick={this.add} />

        </Contents>

    </Container>

);

 - render 함수는 부모 컴포넌트로부터 받은 Props값이 변경되거나 클래스 컴포넌트 안에서 this.setState를 사용하여 State의 값이 변경되어 화면을 갱신할 필요가 있을 때마다 호출된다.

 따라서 render 함수 안에서 this.setState를 사용하여 State값을 직접 변경할 경우 무한루프에 빠질 수 있으므로 주의해야한다.

 

3. getDerivedStateFromProps 함수

 - getDerivedStateFromProps 함수는 부모 컴포넌트로부터 받은 Props와 State를 동기화할 때에 사용

 - 부모 컨포넌트로부터 받은 Props로 State의 특정값을 설정하거나 State값이 Props에 의존하여 결정될 때에 getDerivedStateFromProps 함수를 사용한다.

 - 이 함수에서 Props로 State를 설정하고 싶을 때에 State에 설정하고 싶은 값을 반환하도록 설정하면 된다. 변경할 필요가 없을 경우에는 "null"을 반환하면 된다.

 ex)

static getDerivedFromProps(nextProps: Props, prevState: State) {

    console.log('getDerivedStateFromProps');

    console.log('nextProps: ', nextProps);

    console.log('prevState: ', prevState);

    return null;

}

 - getDerivedStateFromProps 함수는 컴포넌트가 생성될 때에 Props에 의해 State값을 결정해야 하므로 한 번 호출되며. 이후에는 Props와 State를 동기화해야 하므로 Props가 변경될 때마다 호출된다.

 

4. componentDidMount 함수

 - 클래스 컴포넌트가 처음으로 화면에 표시된 후 componentDidMount 함수가 호출된다.

즉, render 함수가 처음 한 번 호출된 후 componentDidMount 함수가 호출되는 것

 - 이 함수는 컴포넌트가 화면에 처음 표시된 후 한 번만 호출되므로 Ajax를 통한 데이터 습득이나 다른 자바스크립트 라이브러리와 연동을 수행할 때에 주로 사용된다.

 ex)

componentDidMount() {

    console.log('componentDidMount');

}

 - componentDidMount 함수는 부모로 부터 받는 Props값이 변경되어도, this.setState로 State값이 변경되어도 두 번 다시 호출되지 않는다. 따라서 이 함수에 this.setState를 직접 호출할 수 있으며, Ajax를 통해 서버로부터 전달받은 데이터를 this.setState를 사용하여 State에 설정하기에 가장 적합하다.

 

5. shouldComponentUpdate 함수

 - 특정 이유(보통은 컴포넌트 최적화)로 Props 또는 State가 변경되어도 화면을 변경하고 싶지 않은 경우에는 shouldComponentUpdate 함수를 사용하여 컴포넌트의 리렌더링을 제어할 수 있다.

 - 이 함수에서 false를 반환하면, 컴포넌트의 리렌더링을 수행하지 않도록 막을 수 있다.

shouldComponentUpdate(nextProps: Props, nextState: State) {

    console.log('shouldComponentUpdate');

    console.log('nextProps: ', nextProps);

    console.log('nextState: ', nextState);

    return true;

}

 - 리렌더링을 제어하는 이유는 화면 렌더링을 최적화하기 위해서 가상 돔에서 브라우저의 렌더링이 웹 성능에 큰 영향을 미치기 때문에 화면을 다시 그리는 리렌더링 또한 리엑트에서 가장 비용이 많이 드는 부분으로서 shouldComponentUpdate 함수를 사용하요 데이터를 비교하고 불필요한 리렌더링을 제어하면 좀 더 좋은 앱을 제작할 수 있다.

 

6. getSnapshotBeforeUpdate 함수

 - Props나 State가 변경되어 화면을 다시 그리기 위해 render 함수가 호출된 후 render 함수의 반환값이 실제로 화면에 반영되기 직전에 getSnapshotBeforeUpdate 함수가 호출된다. 이 함수가 반환하는 값은 다음에 소개할 componentDidUpdate의 세 번째 매개 변수(snapshot)로 전달된다.

 - 이 라이프사이클 함수는 많이 활용되지는 않지만, 화면을 갱신하는 동안 수동으로 스크롤 위치를 고정해야 하는 경우 등에 사용된다.

 ex)

getSnapshotBeforeUpdate(prevProps: Props, prevState: State) {

    console.log('getSnapshotBeforeUpdate');

    console.log('prevProps: ', prevProps);

    console.log('prevState: ', prevState);

    return {

        testData: true,

    };

}

 - getSnapshotBeforeUpdate 함수를 선언한 후 반환값을 반환하지 않는 경우 또는 getSnapshotBeforeUpdate 함수를 선언하고 componentDidUpdate 함수를 선언하지 않는 경우에는 경고가 발생하므로 주의해서 사용해야 한다.

 

7. componentDidUpdate 함수

 - componentDidMount 함수는 컴포넌트가 처음 화면에 표시된 후 실행되고 두 번 다시 호출되지 않는 함수이다. 반대로 componentDidUpdate 함수는 컴포넌트가 처음 화면에 표시될 때에는 실행되지 않지만, Props 또는 State가 변경되어 화면이 갱신될 때마다 render 함수가 호출된 후 매번 호출되는 함수이다.

 - 잘 활용되지는 않지만, getSnapshotBeforeUpdate 함수와 함께 사용하여 스크롤을 수동으로 고정시킬 때에 활용되기도 한다.

 ex)

componentDidUpdate(prevProps: Props, prevState: State, snapshot: IScriptSnapshot) {

    console.log('componentDidUpdate');

    console.log('prevProps: ', prevProps);

    console.log('prevState: ', prevState);

    console.log('snapshot: ', snapshot);

}

 - render 함수와 마찬가지로 이 함수는 State값이 변경될 때에도 호출되므로 State값을 변경하는 this.setState를 직접 호출한다면, 무한 루프에 빠질 수 있으므로 사용시 주의해야 한다.

 

8. componentWillUnmount 함수

 - componentWillUnmount 함수는 해당 컴포넌트가 화면에서 완전히 사라진 후 호출되는 함수이다. 이 함수는 보통 componentDidMount 함수에서 연동한 자바스크립트 라이브러리를 해제하거나 setTimeout, setInterval 등의 타이머를 clearTimeout, clearInterval을 사용하여 해제할 때에 사용한다.

 ex)

componentWillUnmount() {

    console.log('componentWillUnmount');

}

 - componentWillUnmount 함수는 클래스 컴포넌트가 화면에서 완전히 사라진 후 호출되므로 컴포넌트의 State값을 변경하기 위한 this.setState를 호출하면, 갱신하고자 하는 컴포넌트가 사라진 후이기 때문에 경고가 발생할 수 있다.

 

9. componentDidCatch 함수

 - 리엑트는 자바스크립트이므로 비지니스 로직에서 에러의 예외 처리로 try-catch 문을 사용할 수 있다. 하지만 render 함수의 JSX 문법을 사용하는 부분에서 에러가 발생하는 경우 try-catch 문을 사용하여 예외를 처리할 수 없기 때문에 이와 같이 JSX 부분에서 발생하는 에러를 예외 처리할 수 있게 도와주는 라이프사이클 함수가 componentDidCatch이다.

 ex)

componentDidCatch(error: Error, info: React.ErrorInfo) {

    console.log('componentDidCatch');

    console.log('error: ', error);

    console.log('info: ', info);

    // this.setState({

    // error: error

    // });

}

 - render 함수의 JSX 부분에서 에러가 발생하면, componentDidCatch 함수가 실행된다.

 

 

여기서 소개한 리엑트 클래스 컴포넌트의 모든 라이플사이클 함수는 render 함수를 제외하고 모두 생략이 가능하며, 필요할 떼에 재정의하여 사용할 수 있다.