React 생명주기

<목차> 

1. React 생명주기 (Lifecycle)

2. 생명주기를 활용하여 데이터 흐름 이해하기 

 

1.React 생명주기 (Lifecycle)

React의 생명주기는 컴포넌트가 생성되고 업데이트되며, 마지막으로 제거될 때까지의 과정을 나타냅니다. React에서는 컴포넌트의 생명주기를 관리하기 위해 다양한 메서드들이 제공되는데

이를 통해 컴포넌트가 언제 무엇을 할지 제어할 수 있습니다. React의 생명주기는 크게

마운팅(Mounting), 업데이트(Updating)언마운팅(Unmounting)의 세 가지 주요 단계로 나눌 수 있습니다.

 

 

1. 마운팅(Mounting)

마운팅 단계는 컴포넌트가 DOM에 처음으로 삽입될 때 발생합니다. 이 단계에서 컴포넌트는 화면에 렌더링되기 전에 필요한 초기화 작업을 할 수 있습니다. 이때 호출되는 주요 메서드는 다음과 같습니다.

 

componentDidMount(): 컴포넌트가 처음 화면에 렌더링된 후 호출됩니다. 이곳에서 API 요청이나 초기 데이터를 로딩하는 작업을 할 수 있습니다.

render(): 컴포넌트가 화면에 출력되기 전에 호출됩니다. React의 JSX 문법을 반환하여 화면에 렌더링할 내용을 정의합니다.

 

constructor(): 컴포넌트가 생성될 때 호출됩니다. 상태를 초기화하거나 메서드를 바인딩할 때 사용됩니다.

 

static getDerivedStateFromProps(): props가 변화할 때 상태를 업데이트할 필요가 있을 경우 호출됩니다. 상태와 props를 비교해서 새로운 상태를 반환할 수 있습니다.

 

 

 

2. 업데이트(Updating)

업데이트 단계는 컴포넌트의 상태나 props가 변경되어 다시 렌더링이 필요할 때 발생합니다. 업데이트 단계에서 호출되는 메서드는 다음과 같습니다.

 

 

componentDidUpdate(): 업데이트가 완료된 후에 호출됩니다. 이 메서드에서는 DOM 변경 후의 작업을 처리할 수 있습니다.

 

render(): 상태나 props가 변경될 때마다 호출되며, 변경된 내용을 화면에 반영합니다.

 

shouldComponentUpdate(): 컴포넌트의 렌더링을 최적화할 때 사용됩니다. false를 반환하면 렌더링을 방지할 수 있습니다.

 

 

getSnapshotBeforeUpdate(): 렌더링이 화면에 반영되기 전에 호출됩니다. DOM에 변화가 생기기 직전에 실행됩니다.

 

 

static getDerivedStateFromProps(): props가 변경될 때마다 호출되며, 상태를 업데이트할 필요가 있을 때 사용됩니다.

 

3. 언마운팅(Unmounting)

 

언마운팅 단계는 컴포넌트가 화면에서 제거될 때 발생합니다. 컴포넌트가 더 이상 필요 없을 때 리소스를 정리하는 작업을 합니다. 이때 호출되는 메서드는 다음과 같습니다.

 

componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출됩니다.  API 요청 취소나 타이머 정리, 이벤트 리스너 제거 등 리소스를 정리하는 작업을 할 때 사용됩니다.

 

 

주로 생명주기는 state 상태가 업데이트됬을 때 일어나는 리액트의 내장메서드 입니다. 

 

 

2. 생명주기를 활용하여 데이터 흐름 이해하기 

 

 

 

해당 함수를 통한 생명주기 활용 순서

 <div id="root"></div>

    <script type="text/babel">

        class Counter extends React.Component {

            constructor() {

                super();

                this.state = {

                    value: 0,

                    isLoading: false,

                    action: null // action: "increment" | "decrement" | null

                }

                this.setLoading = this.setLoading.bind(this);

            }

            componentDidMount() {

                this.setState({value: 10})

                console.log("나는 render 메서드 호출 후 최초 한 번 실행 됨!");

            }

            componentDidUpdate(prevProps, prevState, snapShot) {

                if (prevState.isLoading && !this.state.isLoading) {

                    if(prevState.action === "increment") {

                        this.setState({ value: prevState.value + 1});

                    } else {

                        this.setState({ value: prevState.value - 1});

                    }

                }

            }

            // action : "increment" | "decrement"

            setLoading(action) {

                this.setState({ isLoading: true, action })

                setTimeout(() => {

                    this.setState({ isLoading: false});

                    console.log("나는 언제?", this.state.isLoading);

                }, 1000)

            }

            render() {

                console.log("render() 실행됨!");

                if (this.state.isLoading) return <h1>로딩 중...</h1>;

                return (

                    <div>

                        <p>Counter : {this.state.value}</p>

                        <button onClick={() => this.setLoading("increment")}>+</button>

                        <button onClick={() => this.setLoading("decrement")}>-</button>

                    </div>

                );

            }

        }

        const root = ReactDOM.createRoot(document.querySelector('#root'));

        root.render(<Counter />);

    </script>

 

 

 

 

 

최초 실행시 

 

 

 

증감 버튼을 눌렀을 시