React의 Hook 이 뭐에요?
- hook이란 특별한 함수를 이야기한다. 예를들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다
그럼 언제 hook을 써요?
- 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 컴포넌트로 바꾸곤 했지만 함수 컴포넌트 안에서 hook을 이용하여 state를 사용할 수 있다.
import React, { useState } from 'react';
function Example() {
// 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
const [count, setCount] = useState(0);이걸 보자
useState를 호출하는 것은 뭘 하는걸까?
- 'state 변수' 를 선언할 수 있다. 위에 선언한 변수는 count라고 부르지만 다른 이름 뭐 apple, banana로 해도 상관 없다.
useState의 인자로 뭘 넘겨줘야 할까?
- useState() hook의 인자로 넘겨주는 값은 , 즉 () 안에 들어가는 값은 state의 초기 값이다. state는 클래스와 달리 객체일 필요가 없고 숫자나 문자 타입일 수 있다. 2개의 다른 변수들을 저장하기원한다면 useState()를 두번 호출해야한다.
useState는 그럼 뭘 반환해요?
- state 변수, 해당변수를 갱신할 수 있는 함수 이 두가지 쌍을 반환한다. 이게 const [count, setCount] = useState()라고 쓰는 이유다.
count라고 부르는 state 변수를 선언하고 0으로 초기화한다.
react는 해당 변수를 리렌더링 할 때 기억하고 가장 최근에 갱신된 값을 제공한다. count 변수의 값을 갱신하려면 setCount를 호출하면 된다.
변수를 보여주고
<p>You clicked {count} times</p>그리고 setCount를 호출한다
<button onClick={() => setCount(count + 1)}>
Click me
</button>코드를 합쳐보자
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
네번째 줄에서 useState의 hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어진다. 또 useState의 인자 값으로 (0)을 넣어주면 count 값을 0으로 초기화 할 수 있다.
아홉번째 줄에서 사용자가 버튼 클릭을 하면 setCount 함수를 호출하여 state변수를 갱신한다. react는 새로운 count 변수를 example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링 한다.
useState의 특징
- 비동기적 업데이트 : setCount 함수는 비동기적으로 동작하며 업데이트 함수를 통해 새로운 상태를 받아 컴포넌트를 다시 렌더링한다.
- 이전 상태 활용 : setCount 함수는 이전 상태 값을 인자로 받아 새로운 상태를 계산하는 함수로 사용할 수 있다.
-여러 상태 사용 : 컴포넌트에서 필요한 만큼 여러 개의 useState를 사용할 수 있다.
const [count, setCount] = useState(0);
const [text, setText] = useState('');
- 함수형 업데이트 : setCount 함수에 함수를 전달하여 이전 상태를 기반으로 업데이트 할 수 있다
// 이전 상태 값을 두 배로 증가시키는 예제
setCount((prevCount) => prevCount * 2);
useState 를 통해 컴포넌트에서 상태를 관리하면서 동시에 React의 렌더링과 업데이트 사이클을 적절하게 다룰 수 있다. 이를 통해 동적인 UI를 만들고 사용자 입력을 다루는 등 다양한 상황에서 활용할 수 있다.
전에 아주 간단하게 useState를 활용해서 만들어본 코드를 보자
import { useState } from 'react'
export default function Test() {
const [fruit, setFruit] = useState('apple')
const handleSubmit = (e: SubmitEvent) => {
e.preventDefault()
setFruit(e.target.temp.value)
}
return (
<div>
<form onSubmit={handleSubmit}>
<input
name='temp'
type='test'
style={{
boxShadow: '0 0 4px #000',
}}
/>
<button>누르면 글자 추가!</button>
</form>
{fruit}
</div>
)
}한 줄 씩 보자
// React와 useState 훅을 불러옵니다.
import React, { useState } from 'react';
// Test라는 이름의 함수 컴포넌트를 정의합니다.
export default function Test() {
// fruit 상태와 해당 상태를 업데이트하는 setFruit 함수를 선언합니다.
// 초기값으로 'apple'을 가지고 있습니다.
const [fruit, setFruit] = useState('apple');
// handleSubmit 함수를 선언합니다. 이 함수는 SubmitEvent 타입의 이벤트 객체를 받습니다.
const handleSubmit = (e: SubmitEvent) => {
// 이벤트의 기본 동작을 막습니다. 주로 폼 제출 시 페이지 새로고침을 방지하기 위해 사용됩니다.
e.preventDefault();
// 이벤트 객체(e)의 target 속성은 이벤트가 발생한 요소를 가리킵니다.
// 여기서는 폼 요소일 것으로 예상됩니다.
// temp라는 이름의 입력 필드(input)에서 가져온 value를 사용하여 fruit 상태를 업데이트합니다.
setFruit(e.target.temp.value);
};handleSubmit 을 선언해서 SubmitEvent가 발생하면 제출될 때마다 새로고침이 방지되게 preventDefault()를 설정해놨고 setFruit 함수를 호출해서 변수가 갱신되게 해놓았다
