[React] State와 생명주기(LifeCycle)

 

 

1. State

1) 개념

- 리액트에서의 state는 리액트 컴포넌트의 상태(컴포넌트의 데이터)를 의미 -> 리액트 컴포넌트의 변경 가능한 데이터

- 리액트 컴포넌트는 개발자가 직접 정의해서 사용하게 됨

- 렌더링이나 데이터 흐름에 사용되는 값만 state의 포함시켜야 함

-> state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에 성능저하에 문제가 있을 수 있음, 그렇지 않은 값은 컴포넌트 인스턴스의 필드로 정의

 

2) 특징

- state는 자바스크립트 객체

class LikeButton extends React.Component {

    // 클래스 컴포넌트의 경우 state를 생성자에서 정의(cf. 함수컴포넌트는 state를 usestate()라는훅을 사용해서 정의)
    // constructor() 함수는 생성자, 클래스가 생성될 때 실행되는 함수 
    constructor (props) {
        super (props);
        // 현재 컴포넌트의 state를 정의하는 부분
        this.state = {
            liked: false
        };
     }
}

 

- state는 setState함수를 사용하여 수정해야함

this.setState({
    name: 'sky'
});

 

3) state 사용법

import { useState } from 'react';

let[변경전, 변경후] = useState(보관할데이터);

 

state 변경

state변경함수(새로운state)

 

array/object 데이터 state의 변경 '기존state == 신규state' 인 경우 변경 안해줌 array/object를 담은 변수는 참조값만 저장됨 [...배열명] 이런식으로 독립적인 copy 배열을 만들어서 변경시켜줘야함

 

 

2. 생명주기(Life Cycle)

 

3. Shared State(공유된 스테이트)

- 자식 컴포넌트들이 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것

 

1) 하위 컴포넌트에서 state 공유하기(state 끌어올리기)

- 어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우

- 하위 컴포넌트의 state를 공통된 부모 컴포넌트로 끌어올려서 공유하는 방식

const scaleNames = {
    c: "섭씨",
    f: "화씨",
};

// TemperatureInput 컴포넌트는 props로 scale과 Temperature를 받아서 표시해줌
function TemperatureInput(props) {
    const handleChange = (event) => {
        props.onTemperatureChange(event.target.value);
    };

    return (
        <fieldset>
            <legend>
                온도를 입력해주세요(단위:{scaleNames[props.scale]}):
            </legend>
            {/* 온도 value가 변경된 경우 props의 onTemperatureChange()함수 호출하여 상위 컴포넌트로 변경된 값 전달 */}
            <input value={props.temperature} onChange={handleChange} />
        </fieldset>
    );
}

export default TemperatureInput;