1.useState.md

1. useState

usetState는 가장 기본적인 Hook으로 함수형 컴포넌트에서도 가변적인 상태를 지니고 있게 해준다.

useState를 사용할 땐 코드의 상단에 import구문을 통하여 불러오고 다음과 같이 사용한다. 배열 비구조화 문법을 이용해 받는 것이기 때문에, state와 setState의 이름은 임의로 정할 수 있다.

import useState from 'react';

const [value, setValue] = useState(0);

이 함수의 파라미터에는 상태의 기본값을 넣어준다. 이 함수가 호출되고 나면 배열들 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 설정하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링된다.

React State 비동기성

• 만약 동기처리를 하게되면, 하나의 상태값 변경 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능 이슈가 생길 수 있다.

하나의 useState()로 여러 상탯값 관리하기 (객체)

import React, { useState } from 'react'
export default function Profile () {
    const [state,setState] = useState({name:'',age:0})
    return (
        <div>
            <p>{`name is ${state.name}`}</p>
            <p>{`age is ${state.age}`}</p>
            <input type='text' value={state.name}
            onChange={e=>setState({...state,name:e.target.value})}/>
            <input type='text' value={state.age}
            onChange={e=>setState({...state,age:e.target.value})}/>
        </div>
    )
}

클래스형 컴포넌트 에서도 강태값을 관리하는 것과 마찬가지로 객체형태로 관리할 수도 있다.
주의할 점은 클래스형 컴포넌트에서는 setState를 하면 병합이 되지만 함수형 컴포넌트에서는 이전 상탓값을 지운다. 다라서 다른 상탯값들이 지워지지 않도록 펼침연산자 ...state를 사용해 펼쳐 넣어줘야 한다.

그러나 이렇게 여러 상태를 객체로 묶어 관리할 때는 useState보다 useReducer라는 훅이 더 적합하다.

state

state란 컴포넌트 상태 setState는 state의 값을 변경시켜줌

const [state, setState] = useState(초기값);
setState(변경시킬값);

state가 업데이트 되면 렌더링이 됨

setState에 콜백함수를 생성하여 state 값을 변경할 수 있음

setState((prevState) => prevState + 1);