[React.js] Kossie Coder - 4강. 리액트 훅스 useState

1. Hook의 개요

Hook은 React 버전 16.8에 새로 추가되었습니다. Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

2. useState

useState는 화면의 상태 값을 바꿀 때 사용한다.

// useState를 import 시켜야 한다.
import React, {useState} from "react";

function App() {
	// text라는 변수를 setText 함수를 이용해 변화시킨다.
	// useState() 괄호안에 초기값을 설정할 수 있다.
	const [text, setText] = useState('Kossie');

	const updateText = () => {
		// text라는 변수를 'Coder'로 변화시킨다.
		setText('Coder');
	};

	return (
		<div className="App">
			{/* JavaScript의 변수를 JSX에서 사용하려면 중괄호 안에 변수를 넣으면 된다. */}
			<span>{text}</span>
			<button onClick={updateText}>Update</button>
		</div>
	);
}

export default App;

---

강의 링크

https://youtu.be/GVEP1uIWQuk