<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> Velopert's Modern React

</aside>

목차

-useState로 함수형 컴포넌트에서 state 관리하기

-input과 state 관리하기

-ref로 DOM 객체 이용하기

Hook 사용 시 지켜야 하는 규칙

• 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.
• 훅은 함수형 컴포넌트, 커스텀 훅 안에서만 호출되어야 한다.

useState로 함수형 컴포넌트에서 state 관리하기

• 리액트에서 동적으로 값이 변경되는 부분은 state라는 속성으로 관리한다.
• React Hooks의 도입으로 함수형 컴포넌트에서도 state를 관리할 수 있게 되었다.
• useState를 react로 부터 받아와서 사용할 수 있다. import { useState } from 'react'

Counter.jsx

function Counter() {
	const [number, setNumber] = useState(0);

	const	onIncrease = () => {
		setNumber((prev) => prev + 1);
	}

	const onDecrease = () => {
		setNumber(number - 1);
	}
}

• useState 함수는 파라미터로 상태의 기본값을 넣어서 배열을 반환한다.
• 배열의 첫번째 요소는 현재 상태(값), 두번째 요소는 Setter 함수이다. Setter 함수는 말 그대로 현재 상태(값)를 변경시키는 함수인 것이다.