react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 state란?

• 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다.

props vs state

• 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있는 면에서 비슷하다.
• props 값은 부모 컴포넌트에서 설정하고, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.
• state 값은 컴포넌트 내부에서 설정하고 업데이트할 수 있다.
• props 값이 무조건 고정적인 것은 아니다.
  • 부모 컴포넌트의 state를 자식 컴포넌트의 props로 설정하고 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메서드를 호출하면 props도 유동적으로 사용할 수 있다.

📙 클래스형 컴포넌트의 state

import { Component } from "react";

class Counter extends Component {
    constructor(props) {
       super(props);
       // state의 초기값 설정
       // 객체 형식!
       this.state = {
          number: 0
       };
    }
    render() {
        // state를 조회할 때는 this.state로 조회
        const { number } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <button 
                    onClick = { () => this.setState({number: number + 1})}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

• props를 사용하기 위해서는 컴포넌트의 생성자 메서드 (constructor 메서드) 내부에서 super(props)를 호출해야 한다.
• super(props)를 호출하면 Component 클래스가 지닌 생성자 함수를 호출해 준다.
• 컴포넌트의 state는 객체 형식이어야 한다.
• render 메서드에서 state를 조회할 때는 this.state 이용

✨ state 객체 안에 여러 값이 있을 때

import { Component } from "react";

class Counter extends Component {
    // state의 초기값 설정
    // 객체 형식!
    state = {
        number: 0,
        fixedNumber: 0
    };
    constructor(props) {
       super(props);
    }
    render() {
        // state를 조회할 때는 this.state로 조회
        const { number, fixedNumber } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값: {fixedNumber}</h2>
                <button 
                    onClick = { () => this.setState({number: number + 1})}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

✨ this.setState가 끝난 후 특정 작업 실행하기

• setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는 setState의 두 번째 파라미터로 콜백 함수를 전달하면 된다.

const onClick = () => {
	this.setState({
        number: number + 1
    }, () => {
        console.log("setState 호출");
    })}
};
<button onClick={onClick}>
    +1
</button>

✨ setState에 객체 대신 함수 인자 전달하기

💡 State Updates May Be Asynchronous
React may batch multiple setState() calls into a single update for performance.
💡 State Updates are Merged
When you call setState(), React merges the object you provide into the current state.

• setState()는 비동기로 처리된다.
• state는 객체이다.
• setState가 연속적으로 호출되면 전달 받은 각 state(객체)를 합치고(merging) 합쳐진 단일 객체에 대해 setState()를 실행한다.
• merge 과정에서 같은 key를 가지고 있다면 값을 덮어쓴다.
• 즉, setState()를 연속적으로 호출하면 Batch 처리(일괄 처리)를 한다.
• 웹 페이지 불필요한 렌더링 횟수를 줄여 좀 더 빠른 속도로 동작하게 만들기 위해서이다.
• 위 문제를 해결하기 위해 setState에 객체 대신 함수 인자를 전달한다.
• 인자로 전달한 함수는 이전 상태 (prevState)를 첫 번째 인자로 받고 업데이트가 적용된 시점의 props를 두 번째 인자로 받는다.

📙 함수형 컴포넌트에서 useState 사용하기

• v16.8 이후부터 useState 함수를 이용하여 함수형 컴포넌트에서도 state를 이용할 수 있다.
• useState 함수를 호출하면 배열이 반환되는데, 첫번째 원소는 현재 상태값이고, 두번째 원소는 상태를 바꾸어 주는 함수이다. (setter 함수)
• useState 함수를 호출할 때 초기 상태값을 인자로 보낸다.

import React, { useState } from 'react';

function Counter() {
    // 배열 비구조화 할당
    const [number, setNumber] = useState(0);
    
    const onIncrease = () => {
        setNumber(number + 1);
    };
    
    const onDecrease = () => {
        setNumber(number - 1);
    };
    
    return (
        <div>
            <h1>{number}</h1>
            <button onClick = {onIncrease}>+1</button>
            <button onClick = {onDecrease}>-1</button>
        </div>
    );

}
export default Counter;

✨ 함수형 업데이트

• 만약 이전의 상태값을 참고하고 싶다면, setState에 함수 인자를 전달하면 된다.
• 이 함수 인자는 전의 상태값을 인자로 받고 업데이트된 상태값을 반환한다.

// 함수형 업데이트
const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

✨ state 사용 시 주의사항

• state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 setter 함수를 사용해야만 한다.

// 잘못된 코드
this.state.number = this.state.number + 1;
this.state.array = this.state.array.push(2);
this.state.object.value = 5;

const [object, setObject] = useState({a: 1, b: 1});
object.b = 2;

• 배열이나 객체를 업데이트해야 할 때는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후 그 사본의 상태를 setState 혹은 setter 함수통해 업데이트한다.

참고: React 공식 문서