2021.03.04 / React - Hook Ex

useState 를 통해 컴포넌트에서 바뀌는 값 관리하기

import React, { useState } from 'react'; // 1. useState 불러오기

function Counter(){
    const [number, setNumber] = useState(0);
    /* 
        - 0은 초기값, setNumber는 이 함수의 상태를 바꿔주는 함수
        - 원래는 useState(0)의 첫번째 원소, 두번쨰 원소를 따로 불러오는데 위와 같이 배열 비구조화 할당(구조분해)으로 하면 편하다.
    */
    const onIncrease = () => {
        setNumber(prevNumber => prevNumber + 1); // 업데이트 함수사용하여 세팅
    };
    const onDecrease = () => {
        setNumber(number - 1); // b. 기존 넘버에서 세팅
    };
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            {/*
                - 리액트에선 onClick과 같은 이벤트를 카멜 케이스 방식으로 쓴다.
                - 안에 들어가는 함수도 함수명만 쓴다. (호출하지 않는다.)
            */}
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter;

함수형 업데이트는 주로 나중에 컴포넌트를 최적화 하게 될 때 사용하게 된다.

 

 

참고

- react.vlpt.us/basic/07-useState.html

- danbi-s-rain.gitbook.io/blog/coding/react/5.-usestate