State

리액트에서는 해당 컴포넌트에 필요한 동적 데이터를 저장하기 위해 useState() 를 사용합니다.

import React, {useState} from 'react';

const Say = () => {
    const [message, setMessage] = useState('초기값');
    const onClickEnter = () => setMessage('안녕!');
    const onClickLeave = () => setMessage('잘가!');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </div>
    );
};

export default Say;

컴포넌트 인스턴스

state 는 컴포넌트 마다 완벽하게 분리되된 상태로 운영되며, 개별적으로 실행되는 것이므로, 하나의 컴포넌트 안에 원하는 만큼 몇번이고 useState() 를 사용하는 것이 가능합니다.

const [enteredTitle, setEnteredTitle] =useState("");
const [enteredAmount, setEnteredAmount] = useState("");
const [enteredDate, setEnteredDate] = useState("");

props와 state

공통점

• props와 state 모두 컴포넌트가 사용할 데이터를 다루는 기술입니다.

차이점

• props는 부모 컴포넌트 쪽에서 보내거나 설정하는 것이 가능합니다. 데이터가 렌더링 되는 본인 자체는 그걸 변경하거나 하는 것이 불가능합니다.
• state는 렌더링 하는 컴포넌트가 직접 가지고 있는 값이며 그 값을 변경하는 것이 가능합니다.

주의!
이러한 변경 방법은 리액트에서 권장하지 않습니다.

this.state.username = "beberiche" // x
setUserName("beberiche") // o

State 리프팅

리액트에서는 두 컴포넌트가 부모-자식 관계를 제외하면 아니라면, props를 통한 데이터 연결은 불가능합니다.

직접적인 연결이 가능한 경우는 무조건 부모에서 자식 컴포넌트로 혹은 자식에서 부모 컴포넌트 상황만 가능합니다.
그렇기에 부모-자식 관계가 아닌 두 컴포넌트 A,B 가 데이터를 주고 받는 방법은, 먼저 A에서 부모 컴포넌트에 데이터를 옮긴 후, 부모 컴포넌트에서 B에게 데이터를 옮기는 것입니다.

여기서 자식 컴포넌트에서 부모 컴포넌트에 데이터를 옮기는 과정을 스테이트 리프팅이라고 합니다.