[React] State와 LifeCycle

State

State는 해당 컴포넌트의 상태변수라고 할 수 있습니다.

모든 state는 특정한 컴포넌트가 소유하고 있으며 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 “아래”에 있는 컴포넌트에만 영향을 미칩니다.

state가 변경되면 react가 값을 감지하여 리랜더링이 일어납니다.
props랑 다르게 컴포넌트가 직접 관리하고 변경할 수 있습니다.

Hook

Hook은 React 16.8부터 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React 기능을 사용할 수 있습니다.

많이 사용하는 hook

• 상태값을 관리하는 useState
• 생명주기를 관리하는 useEffect

useState

함수형에서 사용이 가능하며 상태값을 설정하고 관리할 수 있습니다.

import React, {useState} from "react";
const [state, setState] = useState();

• setState()는 컴포넌트의 re-rendering을 발생시킵니다.

setState

state 값을 직접 변경하더라고 리랜더링이 발생하지 않습니다.
값을 변경하기 위해서는 같이 선언한 setState()를 통해서만 변경이 가능합니다.

const [state, setState] = useState(0);

state = 10;  // (X)
setState(10) // (O)

비동기

간혹 state의 값이 원하는대로 나오지 않을 떄가 있습니다.

setState는 비동기로 동작하며 setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다

const add = () = setState(number + 1);
const multiplyBy2 = () = setState(number * 2);
const multiplyBy2AndAdd = () = {
	multiplyBy2();
	add();
} 

// Object 병합
// number = 1 , number = 1 * 2, number = 1 + 1 
Object.assign({number, number : number * 2, number : number + 1})

변경된 number의 값을 인식하지 못합니다.

const add = () = setState((number) => number + 1);
const multiplyBy2 = () = setState((number) => number * 2);
const multiplyBy2AndAdd = () = {
	multiplyBy2();
	add();
} 

함수를 setState에 넘겨 해결할 수 있습니다
만약 state가 원하는 값을 가지지 못할경우 비동기 문제를 의심해봐야합니다.

State 끌어올리기

부모 컴포넌트는 자식 컴포넌트에게 state를 props로 넘겨줄 수 있습니다.
하지만 props는 읽기전용으로 수정할 수 없는 단방향 흐름입니다.

State를 부모 컴포넌트로 끌어올리는 방법은 State를 변경하는 setState함수를 자식 컴포넌트의 props로 넘기면됩니다.

💡 setState를 바로 넘기는 것이 아니라 변경의 의미를 가지는 함수를 작성하여 함수를 넘겨야 합니다.

// state
const [count, setCount] = useState(0);
const onClickCountAdd = (count) => {
	setCount(count + 1);
}

// component
<Button count={count} handlerOnClickCountAdd={onClickCountAdd}></button>

// Button.jsx

function Button ({count, onClickCountAdd}){
 	return <button onClick={onClickCountAdd(count)}>add</button> 
}

Life Cycle

React는 생명주기를 통해 렌더링됩니다.

Class Component

클래스형 컴포넌트는 DidMount, DidUpdate, DidWillUnMount로 관리할 수 있습니다.

• componentDidMount - 컴포넌트가 처음 실행될때
• componentDidUpdate - state가 업데이트가 될때
• componentWillUnMount - 컴포넌트가 해제되었을 때

componentDidMount() {
    console.log("componentDidMount");
    this.timerID = setInterval(() => this.tick(), 1000);
}

componentDidUpdate() {
    console.log("componentDidUpdate");
    console.log(this.state.date);
}

componentWillUnmount() {
    console.log("componentWillUnmount");
    clearInterval(this.timerID);
}

Function Component (Hook)

Effect Hook, useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다.

React Class의 생명주기 메서드와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect

useEffect(() => {
    console.log("componentDidMount");
    const timerID = setInterval(() => tick(), 1000);

    return () => {
        console.log("componentWillUnmount");
        clearInterval(timerID);
    };
}, []);

useEffect(() => {
    console.log("componentDidUpdate");
    console.log(date);
}, [date]);

• 빈배열을 주었을 경우 DidMount
• 배열을 넣지 않은 경우 DidUpdate
• 배열에 state를 넣은경우 state에 변경이 발생했을 경우만 동작 DidUpdate
• return을 주었을 경우 willUnMount

didMount가 2번 실행되는 경우

React는 기본적으로 개발환경에서 Strict Mode로 설정되어 동작하게 됩니다.

• StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.

Strick Mode를 삭제하면 정상적으로 한번만 동작하게 됩니다.
index.jsx

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    // <React.StrictMode>
    <App />
    // </React.StrictMode>
);