15. React (Re: act #3.5)

State

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며,

컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다

(props를 전달받은 자식 컴포넌트는 props의 내용을 절대로 수정할 수 없다)

즉, props를 변경하기 위해서는 부모 컴포넌트가 바꾸어주어야 비로소 변경이 될 수 있다

 

이러한 문제를 해결하기 위해 State를 사용하게 된다

State는 크게 두 종류로 클래스형 컴포넌트의 state, 함수형 컴포넌트의 state가 있다

 

함수형 컴포넌트

기존 함수형 컴포넌트에서는 state의 사용 자체가 불가했지만, 16.8 이후 사용할 수 있게 되었다

클래스형 컴포넌트와 state에 대한 사용법 자체는 차이가 있다

함수형 컴포넌트에서는 useState 함수를 사용해서 state의 데이터를 변경시켜 사용할 수 있다

 

우선 함수형 컴포넌트에서 state를 사용하기 전에 배열 비구조화 할당이라는 개념을 알 필요가 있다

배열 안에 들어있는 값을 쉽게 추출할 수 있는 문법이다

const arr = ["apple", "banana"];
const apple = fruit[0];
const banana = fruit[1];

해당 코드는 apple과 banana를 각각의 변수에 맞게 담아주게 되는데, 비구조화 할당을 사용하면 아래와 같다

const arr = ["apple", "banana"];
const [apple, banana] = arr;

간략하고 깔끔하게 사용할 수 있게 된다

 

 

함수 컴포넌트에서의 useState 사용 방법

import React, { useState } from "react";

const Apple = () => {
    const [ apple, setApple ] = useState('사과 장사를 시작해보자');
    const [ count, setCount ] = useState(0);

    const onClickEnter = () => {
        return (
            setApple("사과를 구매했습니다"),
            setCount(count + 1)
        )
    }

    const onClickLeave = () => {
        return (
            setApple("사과를 판매했습니다"),
            setCount(count - 1)
        )
    }

    return(
        <div>
            <button onClick={onClickEnter}>구매</button>
            <button onClick={onClickLeave}>판매</button>
            <h1>{ apple }</h1>
            <h4>남은 사과 : {count}개</h4>
        </div>
    )
}

export default Apple

useState()의 인자는 state의 초깃값을 설정하게 된다

함수형 컴포넌트에서 state의 초깃값은 클래스형 컴포넌트와는 다르게 반드시 객체가 아니여도 된다

할당할 수 있는 값의 형태로 숫자, 문자열, 객체, 배열 자유롭게 선택할 수 있다

 

위 코드에서 Apple() 호출시 배열이 반환되게 된다

첫 번째 원소(state)는 현재 상태를 나타내고, 두 번째 원소(setState)는 상태를 바꾸어줄 함수다

이렇게 상태를 바꾸어주는 함수를 세터 함수(Setter function)라고 한다

 

배열 비구조화를 통해 이름은 자유롭게 설정하되, setState는 set 뒤에 첫글자를 대문자로 작성한다

 

 

하나의 컴포넌트에서 여러 번의 useState 사용 방법

import React, { useState } from "react";

const Apple = () => {
    const [ apple, setApple ] = useState('사과 장사를 시작해보자');
    const [ count, setCount ] = useState(0);
    const [ color, setColor ] = useState("black");

    const onClickEnter = () => {
        return (
            setApple("사과를 구매했습니다"),
            setCount(count + 1)
        )
    }

    const onClickLeave = () => {
        return (
            setApple("사과를 판매했습니다"),
            setCount(count - 1)
        )
    }

    return(
        <div>
            <h1 style={{ color }}>{ apple }</h1>
            <h4>남은 사과 : {count}개</h4>
            <button onClick={onClickEnter}>구매</button>
            <button onClick={onClickLeave}>판매</button><br />

            <button style={{ color: "#ff3838" }} 
            onClick={() => setColor("#ff3838")}> 빨강 </button>

            <button style={{ color: "#32ff7e" }} 
            onClick={() => setColor("#32ff7e")}> 초록 </button>
        </div>
    )
}

export default Apple

출력할 내용 부분의 <h1>에 적용할 style의 값을 state로 적용

 

style 변경을 위한 color state를 생성 후 클릭 버튼에 따라 다른 값으로 바뀌게 설정해준다

(하나의 setState를 통해 색깔을 변경 : 빨강 버튼 = 빨간색, 초록 버튼 = 초록색)

 

각각의 버튼에 따라 setColor의 값이 변경되며, state가 적용된 <h1>의 style 또한 변하게 된다

 

 

---

 

State 사용시 주의사항

클래스형 컴포넌트, 함수형 컴포넌트 두 컴포넌트 모두 적용되는 주의사항이 있다

state에 저장된 데이터를 변경해야 할 때 반드시 setState, useState를 사용해야 한다는 것이다

(setState, useState를 통해 전달받은 세터 함수만을 사용해야 한다)

 

객체, 배열과 같은 단일 데이터가 아닌 경우 전체 데이터에 대한 사본을 만들고 사본의 값을 업데이트 한 후

업데이트 된 사본을 setState, useState를 통해 state의 데이터를 업데이트 해야한다

 

여기서 사본을 만든다라고 하면, 스프레드 신텍스와 같은 전개구문을 이용한 방법이 있다

* 스프레드 신텍스(Spread syntax)를 눌러서 참고 

 

이와 같은 방법을 통해 올바른 방법으로 state, 상태를 관리해야 한다