[리액트] Hooks - useState

useState 란

• 가장 기본적인 Hook
• 함수형 컴포넌트도 가변적인 상태값을 가질 수 있도록 한다.

React 에서 useState 사용하기

import 하기

import React, {useState} from 'react'
// 시작은 import 부터 해주어야 합니다.
// 코드에서 useState를 사용하면 대부분 에디터에서 자동으로 import 됩니다

기본 사용방법

import React, { useState } from 'react';
// 변수선언자, 구조분해할당, 초기값설정 입니다.
// const [값을 담을 변수명, 값을 변경할 함수명] = useState(초기값)
// useState는 배열을 리턴합니다. 리턴된 배열을 구조분해 할당을 통해 값을 할당합니다
const [value, setValue] = useState(true)

function HookPractice() {

const changeValue = () => {
        setValue(!value)
}

return (
        <div>
            <p>상태값 {value?'참':'거짓'}</p>
            <button onClick={changeValue}>클릭하여 값 변경하기</button>
        </div>
    );
}
export default HookPractice;

코드에서 사용할 state값을 useState로 선언합니다.

값을 변경하는 함수를 사용해 값을 변경해 줍니다.

활용하기 1

import React, { useState } from 'react';

function HookPractice() {
    const [level, setLevel] = useState(0)

    // useStage를 사용하는 두가지 방법
    const oneTimelevelUp = () => {
        setLevel(level+1)
        setLevel(level+1)
        setLevel(level+1)
    }
    const mamyTimeslevelUp = () => {
        setLevel((level) => level + 1);
        setLevel((level) => level + 1);
        setLevel((level) => level + 1);
    }

    return (
        <div>
            {/* useState는 배치로 동작합니다. 
            따라서 여러번 반복하여 나열한다고 해서
            반복한 만큼 동작하는 것이 아닙니다.*/}
            <p>나의 레벨은? {level}</p>
            <button onClick={oneTimelevelUp}>레벨업</button>
            <button onClick={mamyTimeslevelUp}>레벨파워업</button>
        </div>
    );
}

export default HookPractice;

useState 를 사용한 상태변경은 리액트에서 배치로 처리됩니다. 따라서 여러변화를 한번에 동작하기때문에 나열한다고 해서 반복해서 동작하지 않습니다.

반면, 함수를 사용해서 호출한 경우 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킵니다.

활용하기 2

import React, { useState } from 'react';

function HookPractice() {
    const [legacys, setLegacys] = useState({legacy:'', legacyList:[]})

    // 객체를 비롯한 참조형 데이터타입들은
    // 스프레드로 변경해주어야 한다. 
    // 리액트는 성능을 위해 얕은 복사를 하므로
    // 주소값이 변경되어야 객체의 변경유무를 인식한다.
    const whatIsOurLegacy = (e) =>{
        setLegacys({...legacys, legacy:e.target.value})
    }

    const addLegacy = () =>{
        setLegacys({...legacys, legacyList : [...legacys.legacyList,legacys.legacy], legacy:''})
    }

    return (
        <div>
            {/* jsx에서는 forEach를 사용하지 못합니다. */}
            <p>우리의 유산들</p><input type="text" onChange={whatIsOurLegacy} value={legacys.legacy}></input><button onClick={addLegacy}>입력하기</button>
            <ul>
            {
                legacys.legacyList.map((item)=>{
                    return <li>{item}</li>
                })
            }
            </ul>
        </div>
    );
}

export default HookPractice;배

객체, 배열과 같은 자바스크립트 참조형 자료형은 스프레드문법을 사용해 오브젝트의 주소를 변경해 주어야 합니다.