[포스코x코딩온] 웹개발자 풀스택 과정 12주차 회고 | React : [State, useState()]

React State

• React에서 앱의 유동적인 데이터를 다루기 위한 개체이며 component의 상태를 나타내는 데이터다.
• state가 변경될 시 자동으로 view를 다시 렌더링 한다.
• setState 메서드를 사용하여 state를 변경할 수 있다.
• props는 부모 component에서 자식 component에 데이터 전달 시 사용되며 state는 특정 component가 갖는 상태(값)이다.
• component 내부에서 선언되고 내부에서 변경된다.

 

주의할 점

• state는 원칙적으로 클래스형 component에서만 사용이 가능하다.
• 클래스 안에서 직접 this.state를 변경하지 않고, 항상 setState 메소드를 사용하여 state를 변경한다.
• setState 메소드는 비동기적으로 동작하므로, 이전 상태를 기반으로 다음상태를 계산할 때는 함수 형태의 setState를 사용해야 한다.

---

 

클래스형 component에서의 state

 

import { Component } from "react";


class Counter extends Component {
	
	constructor() {
		this.state = {
			number: 0
        };
        
        this.handleIncrement = this.handleIncrement.bind(this);
    };


	handleIncrement() {
    	// 이전 상태를 기반으로 다음 상태를 계산할 경우, 함수 형태의 setState를 사용한다.
        this.setState((prevState) => {
            return { number: prevState.number + 1 }
        });
    };

    render() {
        return (
            <>
                <div>
                    <h1>{this.state.number}</h1>
                    <button onClick={this.handleIncrement}>증가</button>
                </div>
            </>
        )
    };
};

export default Counter;

 

import { Component } from "react";


class Counter extends Component {
	
    // this 바인딩이 필요하지 않을 경우, 생성자없이 바로 state 초기화가 가능하다.
    
    state = {
        number: 0
    };

	handleIncrement = () => {
        this.setState((prevState) => {
            return { number: prevState.number + 1 }
        });
    };

    render() {
        return (
            <>
                <div>
                    <h1>{this.state.number}</h1>
                    <button onClick={this.handleIncrement}>증가</button>
                </div>
            </>
        )
    };
};

export default Counter;

---

 

함수형 component에서의 state는?

 

Hook

• 클래스 component에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 가능하도록 돋는 React의 새로운 기능
• 최상위 단계에서만 호출이 가능하다.
  • 최상위 component가 아닌 반복문, 조건문, 중첩된 함수 내부에서 호출이 불가하다는 뜻
• React 함수형 component 안에서만 호출이 가능하다.
• 커스텀 훅 이름은 "use"로 시작하는 게 관례

 

Hook 종류

• useState() : 상태 관리를 위한 가장 기본적인 훅
• useEffect(): 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
• useContext(): 리액트에서 전역적으로 접근 가능한 데이터나 함수를 관리하고, 필요한 컴포넌트에서 그 값을 바로 가져와 사용할 수 있게 도와주는 훅
• useReducer(): 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅
• useMemo(): 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅
• useCallback(): 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
• useRef(): 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등)

 

useState()

import { useState } from 'react';

export default function CounterFunction(props) {
	// useState 함수의 인자에는 상태의 초기값이 들어간다.
    // 초기값의 type은 자유롭게 할당이 가능하다.
    // 새로운 state를 추가할 경우, useState 함수를 추가할 수 있다.
    // useState 함수는 배열을 반환한다. => [ 현재 상태, 상태를 바꿔주는 setter 함수 ]
    
    const [number, setNumber] = useState(0);

    const handleIncrement = () => {
        setNumber(number + 1)
    };

    const handleDecrement = () => {
        setNumber(number - 1)
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={handleIncrement}>증가</button>
            <button onClick={handleDecrement}>감소</button>
        </div>
    );
};

---

느낀 점들

리더님께서 왜 React 고육과정에서 state부터는 난이도가 높아진다고 말씀하셨는지 이해가 갔습니다. 함수형 component와 클래스형 component 각각 state의 사용 및 관리 방법이 다르기에 숙지해야 할 문법과 관례들이 점점 많아지고 있고 무엇보다 이론적으로는 내용이 생각보다 간단할지라도 실제 프로젝트에서 해당 개념을 자유롭게 응용할 수 있으려면 많은 연습이 필요할 것 같습니다.