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
Learn how to add interactive with state and event listeners.
nextjs.org
728x90
'Framework > React' 카테고리의 다른 글
상태 관리하기 State (2) | React (0) | 2024.11.09 |
---|---|
상태 관리하기 State (1) | React (3) | 2024.11.07 |
props로 데이터 표시하기 - 속성 Props | React (0) | 2024.11.02 |
컴포넌트로 UI 만들기 - 컴포넌트 Component | React (0) | 2024.10.27 |
React 시작하기 | React (2) | 2024.10.24 |