state

👩‍💻 state

🚌 컴포넌트 내부에서 바뀔 수 있는 값

 

❗ props: 부모 컴포넌트에서만 바꿀수 있으며 컴포넌트 자신은 읽기만 할 수 있다.

 

👩‍💻 클래스형 컴포넌트 state

constructor(props) {
        super(props);
        this.state = {
            number: 0
        };
    }

contructor 메소드는 생성자 메소드이다. 클래스형 컴포넌트에서는  super(props)를 호출해 주어야한다.

this.state 값에 객체 형식으로 초기값을 설정힌다.

 

render() {
        const {number} = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={() => this.setState({number: number + 1})}>+1</button>
            </div>
        );
}

this.state: 현재 state를 조회할 때 사용

 

    state = {
        number: 0,
        fixedNumber: 0
    }

위와 같이 constructor 메소드를 선언하지 않고도 state 초기값을 설정할 수 있다.

 

🚕 this.setState는 비동기적으로 업데이트

this.setState((prevState, props) => {
	return {
    	// 업데이트
    }
})

✔ prevState: 기존 상태

✔ props: 현재 지니고 있는 property (생략 가능)

 

const sum = (a, b) => a + b;

a와 b의 합을 계산하는 함수.

 

setState의 두번째 파라미터: 콜백 함수(setState를 사용하여 state를 업데이트 하고 나서 실행할 작업)

 

👩‍💻 함수형 컴포넌트 state

useState: 함수형 컴포넌트에서 state를 사용할 수 있게 만드는 함수

 

🚌배열 비구조화 할당: 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법

// 배열 비구조화 할당 X
const array = [1, 2];
const one = array[0];
const two = array[1];

// 배열 비구조화 할당 O
const array[1, 2];
const [one, two] = array;

위의 코드는 배열 비구조화를 할당을 사용하지 않은 코드이고 아래의 코드는 배열 비구조화 할당을 사용한 코드이다.둘다 one, two에 각각 배열의 값을 대입하는 코드이다.

 

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;

useState🚕 인자: 상태의 초기값을 넣음🚕 인자의 자료형은 자유🚕 함수 호출시 배열을 반환 (첫 번째 원소: 현재 상태, 두 번째 원소: 상태를 바꾸어 주는 함수)🚕 한 컴포넌트 내에 여러번 사용이 가능

 

 

👩‍💻 state를 사용할 때 주의 사항

🚌 state 값을 변경할 때는 setState 또는 useState를 통해 전달받은 세터 함수를 사용해야 한다.