5. Hook - useState

컴포넌트에 변하는 데이터 넣고 싶어요.useState 실제 적용해보기(useState) ①

컴포넌트에 변하는 데이터 넣고 싶어요.

버튼을 만들고 클릭을 할 때마다 변수에 1씩 더해주는 함수를 만들고 로그를 출력해 보도록 하겠습니다. 좋아하는 색 하단에 버튼을 만들어주고, 버튼에 클릭 이벤트를 넣도록 하겠습니다.

이전 챕터에서 여러 개의 단어가 결합되어 있으면 대문자로 구분했던 것 기억하시나요? html에서는 <button onclick="함수이름"> 으로 선언하던 것과 달리 리액트에서는 <button onClick={함수}>로 선언합니다.


function Resume(props) {
    let like = 0;

    function clickLike() {
        like += 1;
        console.log(like);
    }

    const myColor = props.color;
    const styleColor = {color:myColor};

    return(
        <div style={{border:"solid 1px", width:"500px"}}>
            <h1>{props.name} 자기소개서</h1>
            <h1>{props.hello}</h1>
            <h2>취미 : {props.hobby}</h2>
            <h2>좋아하는 음식 : {props.food}</h2>
            <h2>좋아하는 색 : <span style={styleColor}>{myColor}</span></h2>
            <button onClick={clickLike}>like <span>{like}</span></button>
        </div>
    )
}

export default Resume;

like 버튼을 누를 때마다 만들어둔 변수가 변하는 것을 개발자 도구를 켜보시면 보실 수 있습니다. 이제 이 변수를 매번 페이지에서 다시 그리도록 해야 합니다.

useState

이것을 도와주는 것이 state입니다. 바로 해보겠습니다.


import React, { useState } from 'react';

function Resume(props) {
    const [like, setLike] = useState(0);
		// console.log(useState(0));
    // let like = 0;
    const myColor = props.color;
    const styleColor = {color:myColor};
    return(
        <div style={{border:"solid 1px", width:"500px"}}>
            <h1>{props.name} 자기소개서</h1>
            <h1>{props.hello}</h1>
            <h2>취미 : {props.hobby}</h2>
            <h2>좋아하는 음식 : {props.food}</h2>
            <h2>좋아하는 색 : <span style={styleColor}>{myColor}</span></h2>
            <button onClick={clickLike}>like <span>{like}</span></button>
        </div>
    );
}
export default Resume;

먼저, useState Hook을 React에서 import 하기 위해 import 구문에 {useState} 를 추가합니다.

useState를 실행하면 state 변수와 state 변수의 상태를 바꿔줄 수 있는 함수가 반환됩니다. 그러면 구조분해할당 문법을 이용해 like와 setLike에 변수와 함수를 할당하게 됩니다.

useState의 괄호 안에는 초기값을 넣을 수 있습니다. 0을 넣게 되면 like의 초기값은 0이 되고, ""을 넣게 되면 like의 초기값은 "" 가 됩니다.

like는 0으로 초기화되어있는 값이고, setLike는 like값을 변경하기 위한 함수입니다.

이렇게 보면 변수를 만들고 변수의 값을 변경하면 되지 않나요? 왜 useState를 사용하나요? 라는 생각이 들 수 있습니다.

변수를 만들고 값을 변경하면, 변수 값의 변화를 체크하고 다시 렌더링을 하는 코드를 작성해야 합니다. 하지만 useState를 사용하게 되면 setState(예시에서는 setLike)를 통해 값이 변경될 때 리액트는 자동으로 해당 컴포넌트를 다시 렌더링해줍니다.

어떤 상태(state)가 변경되면 그 부분을 다시 랜더링하는 특징이 있습니다. 그래서 화면에서 계속 바뀌는 부분은 대부분 state를 사용합니다.

예시) 클릭 이벤트가 일어날 때마다 좋아요 숫자가 바뀌는 것, 데이터가 바뀔 때마다 바뀐 데이터를 보여주는 것


import React, { useState } from "react";

function Resume(props) {
  const [like, setLike] = useState(0);

  function clickLike() {
    setLike(like + 1);
  }

  const myColor = props.color;
  const styleColor = { color: myColor };

  return (
    <div style={{ border: "solid 1px", width: "500px" }}>
      <h1>{props.name} 자기소개서</h1>
      <h1>{props.hello}</h1>
      <h2>취미 : {props.hobby}</h2>
      <h2>좋아하는 음식 : {props.food}</h2>
      <h2>
        좋아하는 색 : <span style={styleColor}>{myColor}</span>
      </h2>
      <button onClick={clickLike}>like</button> <span>{like}</span>
    </div>
  );
}

export default Resume;

실제 적용해보기(`useState`) ①

like 버튼을 눌렀을 때 'Like'가 나타나고, 다시 like 버튼을 눌렀을 때는 'Like'가 사라지도록 바꿔보세요!

정답


import React, { useState } from "react";

function Resume(props) {
  const [like, setLike] = useState("");
  function clickLike() {
    if (like === "") {
      setLike("Like");
    } else {
      setLike("");
    }
  }
  const myColor = props.color;
  const styleColor = { color: myColor };
  return (
    <div style={{ border: "solid 1px", width: "500px" }}>
      <h1>{props.name} 자기소개서</h1>
      <h1>{props.hello}</h1>
      <h2>취미 : {props.hobby}</h2>
      <h2>좋아하는 음식 : {props.food}</h2>
      <h2>
        좋아하는 색 : <span style={styleColor}>{myColor}</span>
      </h2>
      <button onClick={clickLike}>like</button> <span>{like}</span>
    </div>
  );
}

export default Resume;