왜 필요한가

여러 조작 요소가 같은 데이터의 변화를 보여줘야 합니다. 각각의 글자를 따로 수정하면 서로 다른 상태가 표시될 수 있습니다.

어떻게 해결하는가

현장 노트 카드 2개가 미저장 상태로 시작합니다. A17 저장을 누르면 해당 카드만 저장됨으로 바뀌고 B04는 그대로입니다. B04도 저장하면 총수가 1에서 2가 됩니다. 같은 ID를 다시 저장해도 총수는 2입니다. 도식은 이벤트·상태 갱신·렌더링을 연결합니다. 초기화·새로고침은 두 카드를 지웁니다. 영속 저장은 제공하지 않습니다.

React: 개념 시뮬레이션

개념 시뮬레이션

React

각 카드를 저장하세요. ID마다 한 번만 집계하며 다른 카드 상태는 유지됩니다.

공유 소유자 · 저장된 ID

제목 프로퍼티 ↓ · 상태는 ID별 소유

A17

현장 노트

B04

현장 노트

  1. 저장 이벤트
  2. 상태 설정 함수가 렌더링 요청
  3. 문구와 합계 렌더링

저장 개수: 0 / 2

A17: 0 · B04: 0

대기

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

React 컴포넌트는 프로퍼티를 받고 상태로 UI를 표현합니다. 상태 설정 함수는 렌더링을 요청하며, 일반 변수 변경만으로 같은 동작이 생기지는 않습니다.

영속 저장은 별도로 추가하세요.

출처