useState()

useState()

• 함수형 컴포넌트에서 state를 관리하는 메서드이다.
• useState 훅은 React 패키지에서 임포트해야 하기 때문에 코드 상단에 아래 코드를 써서 임포트해주자.

import { useState } from "react";

• 기본적인 사용 형식은 아래와 같다.

const ['staete 이름', 'state를 변경할 함수'] = useState('state 초기값')

• 만약 state의 이름이 count, state를 변경하는 함수가 setCount, state의 초기값이 0이라면 아래처럼 쓸 수 있다.

const [count, setCount] = useState(0);

• 만약 위의 count라는 이름을 가진 state의 값을 1증가 시키고 싶다면 아래처럼 사용할 수 있다!

setCount(count + 1)

• 또한 비동기 문제를 해결하기 위해 아래처럼 함수형 업데이트를 사용할 수 있다!
  
  • 한 이벤트 함수 안에 같은 상태를 변경하는 함수를 여러번 호출하면 비동기 문제가 발생한다!

setCount(prev => prev + 1)

state 여러개

• 만약 관리할 state가 여러개라면, useState 훅을 여러개 사용해서 관리할 수 있다.

const [name, setName] = useState('duck')
const [height, setHeight] = useState(180)

state 여러개 (객체)

• 만약 하나의 useState훅에 여러개의 state를 저장하고 싶으면 객체를 사용해서 저장할 수 있다.

const [states, setStates] = useState({
    name: 'duck',
    height: 180
});

• 이렇게 객체로 저장된 state를 수정하고 싶으면 스프레드 연산자(...)를 사용해서 기존 객체를 복사한 다음에 변경할 키 값을 대괄호로 감싸서 값을 할당하면 된다.

function changeState(e) {
    setStates({
    ...states, 
    [키 값]: 변경할 state 값
    })
}

---

input box에 값을 입력함에 따라 state가 변경되고 화면에 변경된 state 값이 즉각 반영되는 예시

• useState 훅에 객체를 사용해서 여러개의 state를 관리하고 이벤트를 발생시켜서 state를 변경시킨다.

import { useState } from 'react';

import './App.css';

const App = () => {

  const [states, setStates] = useState({
    name: 'duck',
    height: 180
  });

  function changeState(e) {
    setStates({
      ...states, 
      [e.target.name]: e.target.value
    })
  }


  return (
    <div className="App">
      <input style = {{fontSize:'50px'}}placeholder="이름" name='name' onChange={changeState}></input>
      <input style ={{fontSize:'50px'}}placeholder="키" name='height' onChange={changeState}></input>
      <div style={{fontSize:'50px'}}>{states.name}, {states.height}</div>

    </div>
  );
}

export default App;

---

버튼을 클릭했을 때, state가 1씩 증가하는 예시

• 함수형으로 state를 변경하는 예시를 잘 살펴보자!

import React from 'react';
import './App.css'
const App = () =>{
  // state이름 count, state 변경 함수, setCount, 초기값 0
  const [count, setCount] = React.useState(0);

  // count를 1 증가시켜주는 함수
  function add_count(){
    //위에서 정의한 state를 변경하는 함수
    setCount(count + 1)
    // 아래처럼 사용할 수도 있다!!!!
    // setCount(prev => prev + 1);
  }

  return(
    <div className='App'>
      <button onClick={add_count}
      style={{width:'200px', height:'200px', fontSize:'100px'}}>{count}</button>
    </div>
  )
}

export default App;

 

 

---

주의사항!

• 만약 위의 코드에서 아래처럼 이벤트가 발생했을 때 실행되는 함수인 add_count에 ()를 붙이면 무한루프에 빠진다.
• ()는 함수를 호출하기 때문에 ()를 붙이면 요소가 렌더링됨과 동시에 함수 호출이 일어나서 무한으로 렌더링이 일어난다.

onClick={add_count()}

• 아래처럼 ()를 떼어서 함수를 참조하거나

onClick={add_count}

• 단순히 이벤트가 발생했을 때 실행되는 함수를 선언해서 해결할 수 있다.

onClick={()=>{add_count()}}