[React JS] #6 state, useState (이벤트로 DOM 값 수정하는 법)

state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다.

그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다.

 

예제) 📁 Hello.js

export default function Hello() {
    let name = "Mike";
     
    function changeName() {
        name = (name === "Mike") ? "Jane" : "Mike";
    }
    return <div>
        <h1>State</h1>
        <h2>{name}</h2> 
        <button onClick={changeName}>Change Name</button>
    </div>;
}

changeName() 함수는 이름이 Mike일 때는 Jane으로, Mike가 아니면 Mike로 변경한다. 이 함수를 버튼의 이벤트 함수로 작성하여 버튼이 클릭됐을 때 <h2> 태그의 내용이 바뀌도록 했다.

💥근데, 버튼을 아무리 클릭해도 내용은 바뀌지 않는다.💥 콘솔 로그로 함수 내부에서 name 변수의 값을 찍어보면 정상적으로 Jane이라고 나오지만, 변수의 값이 바뀌어도 DOM이 업데이트되지 않는다. 여기서의 name은 state가 아니다. 단순히 변수값이라서 컴포넌트가 관리하는 값이 아니므로 리액트가 인지하지 못하고, 값이 바뀌어도 DOM을 업데이트 해주지 않는 것이다.

 

바닐라 자바스크립트에서는 이렇게 작성한다.

export default function Hello() {
    let name = "Mike";
     
    function changeName() {
        name = (name === "Mike") ? "Jane" : "Mike";
        document.getElementById("name").innerHTML = name;
    }
    return <div>
        <h1>State</h1>
        <h2 id="name">{name}</h2> 
        <button onClick={changeName}>Change Name</button>
    </div>;
}

 

리액트가 변수 값의 변화를 인지할 수 있도록 작성하는 방법!

그렇다면 리액트가 인지할 수 있도록 state로 만드는 방법이 뭘까? 리액트 Hook인 useState를 사용하면 된다.

Hook은 리액트의 16.8버전부터 사용할 수 있다. 초기의 리액트는 state와 lifeCycle을 관리하려면 Class형 컴포넌트를 만들어야 했다. 그리고 단순히 UI만 표현해주는 컴포넌트를 함수형으로 작성했다. 리액트 16.8버전부터는 모든 컴포넌트를  함수형으로 만들 수 있게 되었고, 이것을 이용하여 함수형 컴포넌트에서도 state와 lifeCycle을 관리할 수 있게 되었다.

 

useState()

import { useState } from "react";

export default function Hello() {
    const [name, setName] = useState("Mike");
     
    function changeName() {
        const newName = (name === "Mike") ? "Jane" : "Mike";
        setName(newName);
    }
    return <div>
        <h1>State</h1>
        <h2 id="name">{name}</h2> 
        <button onClick={changeName}>Change Name</button>
    </div>;
}

const [name, setName] = useState(); 에서 name은 state이고, setName 앞의 state를 변경해주는 함수이다. 이 문법은 구조 분해 할당 문법이라고 한다. setName() 함수가 호출되어 컴포넌트의 값이 바뀌면 Hello 컴포넌트를 다시 렌더링 해준다. 참고로, useState()함수에 인자로는 변수의 초기값을 적어주면 된다.

 

결과물!

 

Hello 컴포넌트가 3개라면, 버튼은 어떻게 동작할까?

3개의 이름, 3개의 버튼이 있다.

동일한 컴포넌트라도 State는 각각 관리된다. 다른 스테이트에 영향을 미치지 않는다.