React에서 useState 훅은 함수 컴포넌트에서 상태를 추가할 수 있게 해줍니다. JSX 내부에서 useState 훅을 사용하여 상태를 관리하는 방법에 대해 알아보겠습니다.

1. useState 훅이란?

useState 훅은 React 컴포넌트 내에서 상태 값을 관리하고 갱신하는 데 사용됩니다. 클래스 컴포넌트에서의 setState와 유사한 역할을 합니다.

2. JSX 내에서 useState 훅 사용하기

JSX 내에서 useState 훅을 사용하려면 먼저 React를 import 해야 합니다.

import React, { useState } from 'react';

그 다음, 함수 컴포넌트 내에서 useState 훅을 사용하여 상태 값과 해당 값을 갱신할 수 있는 함수를 생성합니다.

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

위의 코드에서, count는 상태 값이고, setCount는 해당 값을 갱신하는 함수입니다. 초기 상태 값인 0은 useState 훅의 매개변수로 전달됩니다.

갱신 함수인 setCount를 사용하여 상태 값을 변경할 수 있습니다.

<button onClick={() => setCount(count + 1)}>Increase Count</button>

위의 예시에서, onClick 이벤트 핸들러 내에서 setCount를 호출하여 count 값을 증가시킵니다.

마치며

이제 JSX 내에서 useState 훅을 사용하는 방법을 알게 되었습니다. useState 훅을 통해 React 함수 컴포넌트에서 상태 값을 추가하고 관리하는 데 활용할 수 있습니다.

더 많은 정보는 React 공식 문서에서 확인하실 수 있습니다.

위 내용은 JSX에서 useState 훅 사용하기에 대한 간략한 안내입니다. 자세한 내용은 React 공식 문서를 참조해 주시기 바랍니다.