가족이 장보기와 식단 항목을 저장하는 계획 앱을 만든다고 가정해 봅시다. 각 카드와 전체 합계가 함께 갱신돼야 합니다. 제작팀은 바뀌는 상태를 바탕으로 JavaScript 함수에서 UI를 표현하려 합니다.
어떻게 해결하는가
집안 계획 카드 2개가 미저장 상태로 시작합니다. 장보기 목록 저장을 누르면 해당 카드만 저장됨으로 바뀌고 주간 식단은 그대로입니다. 주간 식단도 저장하면 총수가 1에서 2가 됩니다. 같은 카드를 다시 저장해도 총수는 2입니다. 도식은 이벤트·상태 갱신·렌더링을 연결합니다. 초기화·새로고침은 두 카드를 지웁니다. 영속 저장은 제공하지 않습니다.
React: 개념 시뮬레이션
개념 시뮬레이션
집안 계획
각 카드를 저장하세요. 카드마다 한 번만 집계하며 다른 카드 상태는 유지됩니다.
공유 저장 상태
제목 프로퍼티 ↓ · 부모 상태에서 카드별 저장 여부 전달
장보기 목록
다음 한 주를 위해
주간 식단
저녁 메뉴 정하기
저장 이벤트
상태 설정 함수가 렌더링 요청
문구와 합계 렌더링
저장 개수: 0 / 2
장보기 목록: 0 · 주간 식단: 0
대기
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
무엇이라 부르는가
React 컴포넌트는 프로퍼티를 받고 상태로 UI를 표현합니다. 상태 설정 함수는 렌더링을 요청하며, 일반 변수 변경만으로 같은 동작이 생기지는 않습니다.
JavaScript 컴포넌트로 UI를 재사용하고 상태 소유권을 명확히 하려는 팀에 어울립니다. 템플릿 중심 Vue나 컴파일러 중심 Svelte가 팀의 선호와 기존 코드에 더 맞을 수도 있습니다. 대부분 정적인 페이지라면 작은 조작 영역만 필요할 수 있습니다. 프레임워크를 고른다고 저장소·인증·배포가 결정되지는 않습니다.
02응용 사례
집안 계획에는 장보기와 식단 카드가 있습니다. 하나를 저장하면 다른 카드는 유지하며 해당 문구와 전체 합계가 바뀝니다. 실제 React에서는 가장 가까운 공통 부모에 선택 ID를 두고 값과 처리 함수를 전달할 수 있습니다. 이 예제는 상태 흐름을 설명하는 브라우저 모형이며 React 번들을 실행하지 않습니다. 새로고침하면 의도적으로 지웁니다.
03구현 참고·주의점
상태 설정 함수로 렌더링을 요청합니다. 이전 값에서 다음 값을 만들 때는 setSaved(previous => previous.includes(id) ? previous : [...previous, id]) 같은 갱신 함수를 씁니다. 합계를 별도로 저장해 어긋나게 하지 말고 같은 배열에서 계산하세요. 렌더링에 부수 효과를 넣지 않습니다. 여러 기기에서 저장하려면 대기·실패·재시도를 포함한 별도 영속 저장 계약이 필요합니다.
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.