[React 기초] Hook 1. 훅(Hook) 개념 정리 & 상태 관리 훅 useState 사용 방법

 이전 포스팅에서 언급했듯이 리액트에는 state라는 개념이 있다.
 

{/*리액트에는 이 컴포넌트의 상태를 나타내는 개념이 있다.
글자 그대로 이해하면 되는데, 리액트는 바로 이 상태 변화에 따라 업데이트를 진행한다.
무슨 말이냐하면, 리액트의 DOM 내에서 현재 상태(state)를 이전 상태(state)와 비교하여 변화가 있는 컴포넌트만을 찾아서 업데이트 한다는 것이다.*/}

 
 
 
 
이 state 때문에, 리액트에서는 어떤 변수의 값이 바뀔 때 return 값도 함께 바꿔주기 위한 useState라는 Hook이 필요하다. 리액트 개발을 하기 위한 아주 기본적인 훅이다.
 
 
 
 
 
🧐훅(Hook)이 뭔데......?

이 훅 아닙니다.....

 
 
 
 
 
 

이것이 리액트의 훅

- Hook 이란?

Hook이라는 개념은 리액트 16.8 Version부터 나온 개념이다. 리액트 팀은 본래 컴포넌트를 만들 때 Class 기반의 컴포넌트를 만들도록 했지만, 시간이 지나면서 복잡한 Class 문법보다는 가벼운 함수 문법이 개발에 장점이 많다는 사실을 깨달았다. 그리고 기존에 Class 문법에서 지원하던 여러가지 기능을 함수형 문법에서 사용 가능하도록 수정했고, 이렇게 탄생한 것이 바로 함수형 컴포넌트인 '훅'이다. Hook은 접두사로 use가 붙으며, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.
 
쉽게 말해서 Class 없이 함수 문법으로 React를 사용할 수 있게 해주는 기술.
 
 
 

우리가 오늘 알아볼 useState 외에도 useEffect, useMemo, useCallback, useRef 등 다양한 내장 Hook이 있다.

앞으로 차근차근 배워보자...😊
 
 
 
 
 

 

 

 

 

 

🪝그래서 useState 훅은 어떻게 사용할까요?

 

  먼저 훅을 사용하기 위해 최상단에 import 해와야 합니다.
 
1. App.js 맨 위에 아래 코드를 추가합니다.

import { useState } from "react";

 
 
 

2. 추가했다면 이제 Hook을 본격적으로 사용해봅시다. 아래의 형태로 useState를 정의할 수 있습니다.

const [변수명, set변수명] = useState(초기값);

 

기본적인 useState의 형태는 이렇습니다.
여기서 물론 const는 var/let 등 다른 자료형도 가능하고, 초기값 또한 숫자는 물론 문자열도 가능합니다.
 
 
 
useState를 제대로 활용하기 위해서는
 
 
 
[변수명, set변수명]
 
이 부분에 대한 이해가 필요한데요,
일단 set변수명의 경우, lowerCamelCase 형태로 설정이 필요합니다.
 
예컨대, [like, setLike] 이런식으로 사용하면 되겠습니다.
▼
1. 여기서 like는 상태 변수로, 이 like는 뒤에 입력한 초기값을 가지게 되며 이후 컴포넌트에 의해 변경될 수 있습니다.
2. 뒤에 나오는 setLike는 상태를 갱신하는 함수입니다. 즉, setLike 함수를 사용하여 like에 새로운 값을 설정합니다. setLike를 호출하면 컴포넌트는 다시 렌더링되며, 업데이트된 값이 like 변수에 반영됩니다. 전달자 역할이라고 생각하면 편할 듯
 
 
 
 
 
 
예제 코드

import { useState } from "react";

function App() {
  var [like, setLike] = useState("좋아요"); //useState 선언 및 like의 초기값을 "좋아요"로 설정

  const clickLike = () => {
    setLike("감사합니다!");
  }; //clickLike 함수 호출 시 setLike 함수에 "감사합니다!" 전달

  return (
    <>
      <button onClick={clickLike}>{like}</button> //버튼 클릭 시 clickLike 함수 호출
    </>
  );
}

export default App;

 
 
 
 

실행결과 화면

좋아요 -> 감사합니다!

 

여기까지 해보시면 useState 훅 사용해보기는 끝입니다!

앞으로 배울 다양한 훅과 커스텀 훅 제작 시 발판이 되는 개념이니 예제 코드까지 꼭 직접 실행해보시길 권장드립니당.

 
 







 
리액트 공부하시는 분들께 도움이 되었길 바라며..