state로 상호작용성 추가하기 - 상태 State | React

state로 상호작용성 추가하기 Adding Interactivity with State

---

React가 state와 이벤트 핸들러로 어떻게 상호작용성(interactivity)을 추가하는지 알아봅시다.

버튼을 하나 추가합니다.

<div>
	<button>Like</button>
</div>

 

이벤트 리스닝 Listening to events

버튼이 클릭되었을 때 어떤 동작을 하게 하려면 onclick 이벤트를 사용합니다.

<button onClick={}>Like</button>

 

React에서 이벤트명은 카멜케이스(camelCase)로 작성합니다.

onClick 이벤트는 유저의 상호작용에 반응할 수 있는 많은 이벤트 중 하나입니다.

 

이벤트 처리하기 Handling events

이벤트가 발생할 때마다 처리하기 위해 메소드를 정의할 수 있습니다.

---

상태와 훅 State and hooks

React는 hook이라는 메소드 집합을 가지고 있습니다.

훅을 사용하여 컴포넌트에 state같은 추가적인 로직을 구현할 수 있습니다.

state는 주로 유저의 상호작용으로 실행되어 시간이 지남에 따라 변경되는 UI의 모든 정보입니다.

 

유저가 Like 버튼을 클릭한 횟수를 저장하고 증가시키는데 state를 사용할 수 있습니다.

상태를 관리하기 위한 React hook useState()

 

useState()는 배열을 반환하고, 컴포넌트에서 배열 구조분해로 배열에 접근, 사용할 수 있습니다.

• 첫 번째 항목 : value
• 두 번째 항목 : value값을 업데이트할 수 있는 메소드
  보통 set + value명 으로 명명

useState 선언 시 파라미터로 초기값을 전달하여 초기화할 수 있습니다.

const [like, setLike] = useState();
// 또는
const [like, setLike] = useState(0);	// like의 초기값 0

버튼 클릭 핸들러에서 like값을 업데이트하는 메소드를 호출합니다.

function handleClick() {
	setLike(like + 1);
}

 

 

React Foundations: Adding Interactivity with State | Next.js