상호작용성 추가하기

화면의 일부 요소는 사용자 입력에 반응하여 업데이트됩니다. 예를 들어, 이미지 갤러리를 클릭하면 활성 이미지가 전환됩니다. React에서 시간에 따라 변하는 데이터를상태(state)라고 합니다. 어떤 컴포넌트에도 상태를 추가하고 필요에 따라 업데이트할 수 있습니다. 이 장에서는 상호작용을 처리하고, 상태를 업데이트하며, 시간에 따라 다른 출력을 표시하는 컴포넌트를 작성하는 방법을 배우게 됩니다.

이벤트에 응답하기

React를 사용하면 JSX에이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 클릭, 호버링, 폼 입력에 포커스 맞추기 등 사용자 상호작용에 응답하여 트리거될 여러분 자신의 함수입니다.

<button>와 같은 내장 컴포넌트는onClick와 같은 내장 브라우저 이벤트만 지원합니다. 그러나 여러분 자신의 컴포넌트를 생성하고, 그 이벤트 핸들러 prop에 원하는 애플리케이션별 이름을 부여할 수도 있습니다.

상태: 컴포넌트의 메모리

컴포넌트는 종종 상호작용의 결과로 화면에 표시되는 내용을 변경해야 합니다. 폼에 타이핑하면 입력 필드가 업데이트되어야 하고, 이미지 캐러셀에서 "다음"을 클릭하면 표시되는 이미지가 변경되어야 하며, "구매"를 클릭하면 제품이 장바구니에 담겨야 합니다. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억"해야 합니다. React에서 이러한 종류의 컴포넌트별 메모리를상태(state)라고 합니다.

useStateHook을 사용하여 컴포넌트에 상태를 추가할 수 있습니다.Hook은 컴포넌트가 React 기능(상태는 그 기능 중 하나입니다)을 사용할 수 있게 해주는 특별한 함수입니다.useStateHook을 사용하면 상태 변수를 선언할 수 있습니다. 이 Hook은 초기 상태를 받아 현재 상태와 이를 업데이트할 수 있는 상태 설정 함수의 쌍을 반환합니다.

다음은 이미지 갤러리가 클릭 시 상태를 사용하고 업데이트하는 방법입니다:

렌더링과 커밋

컴포넌트가 화면에 표시되기 전에 React에 의해 렌더링되어야 합니다. 이 과정의 단계를 이해하면 코드가 어떻게 실행되는지 생각하고 그 동작을 설명하는 데 도움이 됩니다.

컴포넌트가 주방에서 재료로 맛있는 요리를 조합하는 요리사라고 상상해 보세요. 이 시나리오에서 React는 고객의 주문을 받아서 가져다 주는 웨이터입니다. UI를 요청하고 제공하는 이 과정에는 세 단계가 있습니다:

1. 트리거(식당 손님의 주문을 주방에 전달)
2. 렌더링 (주방에서 주문 준비)
3. 커밋 (주문을 테이블에 배치)

1. 트리거
2. 렌더링
3. 커밋

일러스트레이션 제공:Rachel Lee Nabors

스냅샷으로서의 State

일반 JavaScript 변수와 달리 React state는 스냅샷처럼 동작합니다. state를 설정해도 이미 가지고 있는 state 변수가 변경되는 것이 아니라, 다시 렌더링을 촉발합니다. 처음에는 놀라울 수 있습니다!

이 동작은 미묘한 버그를 피하는 데 도움이 됩니다. 여기 작은 채팅 앱이 있습니다. 먼저 “Send”를 누르고그 다음에수신자를 Bob으로 변경하면 어떤 일이 발생할지 추측해 보세요. 5초 후alert에 누구의 이름이 나타날까요?

일련의 state 업데이트 큐에 넣기

이 컴포넌트에는 버그가 있습니다: “+3”을 클릭하면 점수가 한 번만 증가합니다.

스냅샷으로서의 State에서 왜 이런 일이 발생하는지 설명합니다. state를 설정하면 새로운 렌더링을 요청하지만, 이미 실행 중인 코드에서는 변경되지 않습니다. 따라서score는 setScore(score + 1)를 호출한 직후에도 계속0입니다.

state를 설정할 때업데이터 함수를 전달하면 이 문제를 해결할 수 있습니다.setScore(score + 1)를 setScore(s => s + 1)로 바꾸면 “+3” 버튼이 수정되는 것을 확인하세요. 이를 통해 여러 state 업데이트를 큐에 넣을 수 있습니다.

state 내 객체 업데이트하기

State는 객체를 포함한 모든 종류의 JavaScript 값을 보유할 수 있습니다. 하지만 React state에 보관된 객체와 배열을 직접 변경해서는 안 됩니다. 대신 객체나 배열을 업데이트하려면 새로운 객체를 생성하거나(또는 기존 객체의 사본을 만든 다음) state를 업데이트하여 해당 사본을 사용해야 합니다.

일반적으로 변경하려는 객체와 배열을 복사하기 위해...전개 구문을 사용합니다. 예를 들어, 중첩된 객체를 업데이트하는 것은 다음과 같을 수 있습니다:

코드에서 객체를 복사하는 작업이 지루해진다면,Immer와 같은 라이브러리를 사용하여 반복적인 코드를 줄일 수 있습니다:

상태의 배열 업데이트

배열은 상태에 저장할 수 있는 또 다른 종류의 가변 JavaScript 객체이며 읽기 전용으로 취급해야 합니다. 객체와 마찬가지로 상태에 저장된 배열을 업데이트하려면 새 배열을 생성하거나(또는 기존 배열의 복사본을 만든 후) 상태를 새 배열을 사용하도록 설정해야 합니다:

코드에서 배열을 복사하는 작업이 지루해진다면,Immer와 같은 라이브러리를 사용하여 반복적인 코드를 줄일 수 있습니다:

다음은 무엇인가요?

이 장을 페이지별로 읽어보려면이벤트에 응답하기로 이동하세요!

또는 이미 이 주제에 익숙하시다면, 상태 관리에 대해 읽어보는 것은 어떨까요?