[React] 리액트 Hooks (1) - useState

📌  요약: useState

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

 

state에는 현재값이 들어가며, setState로 state를 새로 변경 가능합니다.

 

만약 state를 변경할 때 이전 state와 관련이 있다면, 다음 코드처럼

인자를 이전 state (prevState)

return 값을 변경되는 state (newState)

로 작성하는 게 좋습니다.

setState((prevState) => {
	// ...
    return newState;
});

---

📚  공부 목적

리액트로 개발할 때 함수형 컴포넌트를 사용한다면, 리액트 Hooks라는 편리한 기능을 사용할 수 있습니다. 클래스 컴포넌트는 state를 이용하여 업데이트, 생명 주기 메소드를 제공합니다. 반면, 함수 컴포넌트는 state, 생명 주기 기능 구현을 못하기 때문에 hooks을 이용합니다. 갈고리처럼 쓰고 싶은 기능이 있을 때 함수로 사용하면 됩니다. 이 hooks 기능은 함수형 컴포넌트를 사용할 때 자주 사용되므로 꼭 이해하고 넘어가야 할 필요가 있다고 생각해 깊게 공부했습니다.

---

🐣  useState

1. 시계 컴포넌트로 실습

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

 

useState 인자에 초기값을 넣으면, state와 setState를 배열 형태로 리턴해줍니다. state에는 현재 상태, setState로 state를 간편하게 변경할 수 있습니다. 예시로 간단한 시계 컴포넌트를 생성한다고 합시다. 다음 코드처럼 직관적인 이름을 쓸 수 있습니다.

const [time, setTime] = useState(5);

 

state에는 현재 시간(초기값)인 5가 들어가며 6시로 시간을 변경하고 싶다면 setTime(6)로 state를 변경할 수 있습니다. 이 과정을 해당 컴포넌트를 업데이트한다고 하며 재렌더링되는 것입니다.

 

create-react-app을 사용하여 시간이 보이고 Update 버튼을 누르면 시간이 바뀌는 시계 컴포넌트를 직접 만들어 보겠습니다.

 

import { useState } from "react";

function App() {
  const [time, setTime] = useState(1);
  // 초기값 1시로 세팅

  const handleClick = () => {
    setTime(time + 1);
  };
  // 누르면 time에 + 1을 해주는 함수 생성
  
  return (
    <div>
      <p>현재 시간은 {time}시입니다!</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

export default App;

 

이렇게 버튼을 누르면 1시에서 2시로 변경되는 것을 볼 수 있습니다. 실제로 컴포넌트가 업데이트 되는지 확인하기 위해 콘솔 로그를 이용하여 확인할 수 있습니다.

 

첫 화면에 컴포넌트가 생성될 때 한 번, 그리고 Update 버튼을 누를 때마다 콘솔에 업데이트가 되었다고 표시되는 것을 볼 수 있습니다. 하지만 이 컴포넌트에 한 가지 문제가 있습니다. Update 버튼을 누를 때마다 time이 + 1 씩 더해지기 때문에 계속 누른다면 끝도 없이 숫자가 올라갑니다. 그래서, time이 12시가 넘어가면 다시 1시로 바뀌도록 코드를 수정해보겠습니다.

 

import { useState } from "react";

function App() {
  const [time, setTime] = useState(1);
  // 초기값 1시로 세팅

  const handleClick = () => {
    let newTime;
    // newTime은 setTime 함수를 이용하여 바꿀 새로운 시간입니다.

    if (time >= 12) { // 만약 현재 시간이 12시보다 크거나 같다면, newTime을 1로
      newTime = 1;
    } else {
      newTime = time + 1; // 12시보다 작다면, newTime을 time + 1
    }
    setTime(newTime); // newTime으로 변경
  };

  console.log("업데이트 되었습니다");

  return (
    <div>
      <p>현재 시간은 {time}시입니다!</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

export default App;

 

이제 시계처럼 정상 작동을 하는 것을 볼 수 있습니다.

 

2. input 태그로 입력값 받고 출력하기

먼저, 다음과 같이 코드를 작성합니다.

import { useState } from "react";

function App() {
  return (
    <div>
      <input type="text" />
      <button>Upload</button>
    </div>
  );
}

export default App;

 

다음처럼 div 태그 안에 input, button 태그가 화면에 보이는 것을 확인할 수 있습니다. 

 

이제 새로운 input 마다 state가 업데이트 되도록 useState를 사용해보겠습니다. state가 어떻게 업데이트 되는지 확인하기 위해 중간에 console.log(input)으로 확인하겠습니다.

import { useState } from "react";

function App() {
  const [names, setName] = useState(["Hyun", "Lily"]); // 초기값 지정
  const [input, setInput] = useState("");

  const handleInputChange = (event) => {
    setInput(event.target.value); // setInput 함수로 변경하는 handleInputChange 함수 생성, 새로운 input을 지정
  };

  console.log(input); //input 값 확인

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      {/* handleInputChange 함수 연결 */}
      
      <button>Upload</button>
      {names.map((name, index) => { // map 함수 사용할 때엔 key 값 넣기! 여기선 값을 index로 넣어주었다!
        return <p key={index}>{name}</p>;
      })} 
    </div>
  );
}

export default App;

콘솔에 보이는 것처럼 하나를 입력할 때마다 state가 변경되는 것을 알 수 있습니다. 이제 업로드 버튼을 누르면 하단에 입력한 input 값을 보여주도록 하겠습니다.

 

import { useState } from "react";

function App() {
  const [names, setNames] = useState(["Hyun", "Lily"]);
  const [input, setInput] = useState("");

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

  // Upload 버튼을 누를 때마다 handleUpload 호출
  const handleUpload = () => {
    setNames((prevState) => {
      // prevState를 확인하기 위해 콘솔 확인하기
      console.log(prevState);

      return [input, ...prevState];
    }); // 이전 값과 관련이 있을 때에는 매개변수로 prevState를, return의 첫 번째 값으로 input과 그 다음 값으로는 ...prevState를 사용해주었다.
  };

  // console.log(input);

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />

      <button onClick={handleUpload}>Upload</button>
      {names.map((name, index) => {
        return <p key={index}>{name}</p>;
      })}
    </div>
  );
}

export default App;

📌 만약 useState를 사용할 때, 초기에 무거운 작업을 한다면?

콜백함수 이용해서 처음 렌더링 때만 실행되게 하기!

 

초기에 무거운 작업을 진행하게 된다면, 코드가 비효율적입니다. 위에서 초기값을 렌더링할 때 뿐만 아니라 그 이후 input의 state를 업데이트할 때마다 이전값을 다시 불러오게 되는데, 만약 초기값이 무거운 데이터라면 효율이 떨어지게 됩니다.

 

import { useState } from "react";

const heavyWork = () => {
  console.log("무거운 작업");
  return ["Hyun", "Lily"];
};

function App() {
  const [names, setNames] = useState(heavyWork());
  const [input, setInput] = useState("");

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

  const handleUpload = () => {
    setNames((prevState) => {
      // console.log(prevState);

      return [input, ...prevState];
    });
  };

  // console.log(input);

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />

      <button onClick={handleUpload}>Upload</button>
      {names.map((name, index) => {
        return <p key={index}>{name}</p>;
      })}
    </div>
  );
}

export default App;

 

 

그래서 초기값을 넣어주는 인자에 바로 값을 넣어주는 게 아니라, 콜백 함수를 이용하면 더 효율적으로 코드를 관리할 수 있습니다.

function App() {
  const [names, setNames] = useState(() => {
    return heavyWork();
  });

 

이 코드처럼 리턴값에 넣어주면, 처음 렌더링될 때만 "무거운 작업"이 콘솔에서 나타납니다.

 

 

참고

• https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
• https://velog.io/@velopert/react-hooks