React Hooks - useState

목차

1. useState

2. 사용방법

3. 예제코드

 

1. useState

 

 

React에서 State란 Component가 가질 수 있는 상태를 의미한다.

 

useState는 컴포넌트의 상태를 간편하게 사용할 수 있도록 도와주는 함수다.

 

 

 

2. 사용방법

 

const [ state, setState ] = useState( 초기값 )

 

useState를 호출하면 인자값으로는 초기값을 넣어준다.

 

맨 처음 state에는 초기값이 들어가있고 이후에 state를 변경하고 싶다면, setState를 변경할 수 있다.

 

setState를 사용하게 되면 해당 컴포넌트는 화면에 다시 렌더링된다.(componentDIdupdate)

 

 

아래의 방법은 초기값으로 어떤 로직을 가진 함수를 호출해야될 때,

 

그 로직은 한번만 실행되야할 떄 사용하는 방법이다. 

 

아래처럼 콜백으로 함수를 호출하지않고, 그냥 넣으면 컴포넌트가 업데이트 될 떄마다

 

로직을 실행하게 되어 쓸데없는 연산을 실행하게 된다.

 

const [ state, setState ] = useState( ( ) => { return 함수( ) })

 

setState 활용방법

 

setState 함수는 setState( 바꿀 상태 )로 state를 변경할 수 있지만,

 

기존 상태에서 새로운 상태를 추가하는 배열형태를 이용할 떄는 사용하기가 까다롭다.

 

이를 위해서 setState는 다음과 같이 사용할 수 있다.

 

setState( (previousState) => { return ... })

setState 안에서 콜백함수를 만들면, 인자값으로 이전상태의 값을 불러온다.

 

이를 이용하여 이전상태에 추가할 상태를 구현하는 코드를 작성할 수 있다.

 

 

 

 

 

3. 예제코드

 

 

 

아래의 코드는 버튼을 클릭할 때마다 숫자를 올려주는 코드이다.

 

버튼을 클릭하면 setCount를 실행하여 화면을 다시 렌더시켜준다.

import { useState } from "react"

const App = () => {
    const [count, setCount] = useState(0)


    const increment = () => {
        setCount(count+1)
    }
    const decrement = () => {
        setCount(count-1)
    }

    return(
        <div>
            <div>카운터 : { count }</div>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
    )
}

export default App

 

 

 

아래의 코드는 인풋박스에 이름을 입력하여 버튼을 클릭하면 이전 상태값을 불러와 화면에 모두 렌더시키는 코드이다.

 

import { useState } from "react"

const App = () => {
    const [students, setStudents] = useState(["Char1ey"])
    const [input, setInput] = useState('');

    const handleInputChange = (e) => {
        setInput(e.target.value)
    }

    const handleAdd = (e) => {
        setStudents(prev => {
            console.log(prev)
            return [...prev, input]
        })
    }

    return (
        <div>
            <input value={input} onChange={handleInputChange} type="text" />
            <button onClick={handleAdd}>추가</button>
            <div>{students.map((v) => {
                return <div>{v}</div>
            })}</div>
        </div>
    )
}

export default App

 

 

 

마지막으로 아래의 코드는 복잡한 로직을 가정한 함수를 실행하여 초기값을 집어 넣는 코드이다.

 

업데이트 버튼을 아무리 눌러도 로직을 가진함수는 처음 화면이 렌더될떄 한번만 실행된다.

 

import { useState } from "react"

const logic = () => {
    const arr = []
    for (let i = 0; i <= 100; i++) {
        arr.push(i)
    }
    console.log('로직함수')
    return arr
}

const App = () => {
    const [state, setState] = useState(() => logic())

    const handleClick = (e) => {
        setState(prev => [...prev, prev[prev.length - 1] + 1])
    }

    return (
        <div>
            <div>배열의 마지막 숫자: {state[state.length - 1]}</div>
            <button onClick={handleClick}>업데이트</button>
        </div>
    )
}

export default App