React Hook의 이해 | useState, useEffect

 

✅ useState

: 일종의 "메모장" 같은 것.

컴포넌트 안에서 특정 값을 기억하고 싶을 때 사용하는 용도.

ex1) 버튼을 몇 번 눌렀는지 숫자 기억하기. (count와 setCount 예제는 아마 지겹게 자주 보셨을것임.)

ex2) 입력창에 입력한 값 기억하기.

const [count, setCount] = useState(0);

 

• count: 현재 기억하고 있는 숫자
• setCount: 그 숫자를 바꿔주는 펜

버튼 클릭할 때마다 숫자 써놓은 값을 바꿀 수 있음.
바뀌면 화면도 자동으로 다시 그려짐(리렌더링).

 

 

✅ useEffect

: "알람시계" 같은 개념.

어떤 일이 일어났을 때(조건) 자동으로 실행되는 코드.

ex1) 컴포넌트가 처음 화면에 나타났을 때 실행

ex2) 특정 값이 바뀔 때마다 실행

ex3) API 호출할 때

 

useEffect(() => {
  console.log('컴포넌트가 나타났어!');
}, []);

• 이건 컴포넌트가 처음 렌더링될 때 한 번만 실행.

useEffect(() => {
  console.log('count가 바뀌었어!');
}, [count]);

• 이건 count가 바뀔 때마다 실행.

 

 

✅ 요약 정리

Hook	역할
useState	값 기억하고 바꾸기
useEffect	값이 바뀌거나 화면에 나타날 때 실행하기

 

 

✅ 왜 React에만 있나?

• React는 함수형 컴포넌트에서 "상태(state)"와 "라이프사이클(컴포넌트가 나타나고, 사라지고, 값이 바뀌는 시점)" 을 관리하기 위해 이러한 Hook들을 만들어낸 것.
• 예전 클래스 컴포넌트에서는
  - this.state, this.setState
  - componentDidMount, componentDidUpdate, componentWillUnmount
  이런걸 써야 했는데, useState와 useEffect가 이걸 훨씬 간단하게 대체한 것임.

 

✅ 다른 프레임워크에서는?

다른 프레임워크(ex. Vue, Svelte, SolidJS 등)에도 비슷한 개념은 있지만,
이름도 다르고 사용하는 방법도 다름.

• Vue: ref, watchEffect, onMounted 등
• Svelte: $: 리액티브 문법
• SolidJS: createSignal, createEffect

그래서 useState, useEffect는 React 전용 문법이라고 보면 됨...