[React] Hooks를 사용해서 State 변수 구현하기

문제 상황

export default function(){
    let name = "Hayden"

    function showname(e){
        name = name === "Hayden" ? "Nedyah":"Hayden"
        console.log(name)
    }

    return <div>
        <h1 >{name}</h1>
        <button onClick={showname}>btn1</button>
    </div>
}

해당 코드를 살펴보자.
해당 코드에서 의도한 바로는, 버튼을 클릭하면 name 변수 안의 값이 바뀌면서 화면에 표시되는 이름도 바뀌어야 한다.

하지만 실제 실행 결과를 보면, 분명 변수에는 바뀐 이름이 들어 있는데 화면에는 이전 이름이 그래도 표시되는 것을 볼 수 있다.

이는 변수의 바뀐 값을 렌더링해주지 않아서 발생하는 문제이다.
이를 해결하기 위해 name 변수를 State를 관리해주는 변수로 등록해주면 되지만, 이는 함수형 컴포넌트에서는 지원하지 않는 기능이다.

그렇다면 해당 문제를 어떻게 해결할 수 있을까?

Hook이란?

Hook은 리액트 16.8 버전부터 추가된 기능으로 함수형 컴포넌트 안에서 State, 생명주기 등을 사용할수 있게 해주는 기능이다.
Hook이 등장하기 이전엔 클래스형 컴포넌트에서만 State를 사용할 수 있었다.

하지만 Hook이 등장하면서 함수형 컴포넌트에서도 해당 기능을 사용할 수 있었다.

Hook으로 State 관리하는 방법

const [name, setName] = useState("Hayden")

위 문장이 Hook을 이용한 State 관리의 핵심이다.

먼저 위의 문법이 어색할 수도 있는데 이는 js에서 지원하는 구조 분해 할당 문법이다.

• 구조 분해 할당 예시
  • var [a, b] = ["A입니다.", "B입니다."]
  • 위 문장이 실행되면 변수a에는 "A입니다.가,b에는B입니다.` 가 저장된다.
  • 즉 말 그대로 배열을 분해해서 할당해주는 느낌으로 이해하자.

useState() 메소드의 매개변수로는 초기 값으로 설정할 값을 넘겨준다.
그렇게 되면 useState()는 배열로 된 값을 넘겨주는데 이는 [값이 담긴 State 변수, 변수의 값을 설정할 수 있는 Setter 함수] 형태이다.
이를 구조 분해 할당으로 각각 name, setName에 저장하는 것이다.

이후 필요한 장소에 name변수를 사용하고, 변수의 값을 변경하고 싶을 때는 setName()메소드를 호출해주면 된다.

전체 예제를 살펴보자

예제 코드

import { useState } from 'react'



export default function(){
    const [name, setName] = useState("Hayden")

    function showname(e){
        setName(name === "Hayden" ? "Nedyah":"Hayden")
        console.log(name)
    }


    return <div>
        <h1 >{name}</h1>
        <button onClick={showname}>btn1</button>
    </div>
}