한 권으로 끝내는 Node & Express(2판): 모던 웹을 위한 서버 사이드 자바스크립트의 모든 것

293

16

장

단일 페이지 애플리케이션

메시지를 반환하며, 등록하지 않았다면 폼을 렌더링합니다. 이런 패턴은 리액트에서 아주 자주

쓰입니다.

작고 사소한 기능 하나를 위해 너무 많은 일을 한 것처럼 보입니다.

API

호출에서 뭔가 문제가

생겼을 때 오류를 처리할 수 있긴 하지만 사용자 친화적이라고 하긴 어렵고, 이 페이지에 있는

동안에만 어떤 패키지에 등록했는지 컴포넌트가 기억합니다. 페이지를 떠났다가 다시 돌아오

면 폼이 또다시 보입니다.

이 코드를 좀 더 매력 있게 만드는 방법도 있습니다. 우선 입력 인코딩과 오류 판단 작업의 복

잡한 부분을 처리할

API

래퍼를 만듭니다. 사용하는 엔드포인트가 늘어날수록 가치가 있는 일

입니다. 번거로운 폼 처리를 도와주는 리액트용 폼 처리 프레임워크도 다양합니다.

사용자가 어떤 패키지에 등록했는지 ‘기억’하는 문제는 좀 더 어렵습니다. 결국 필요한 것은 사

용자의 등록 여부와 관계없이 패키지 객체에서 그 정보를 사용할 수 있도록 하는 방법입니다.

하지만 컴포넌트는 패키지에 대해 아무것도 모릅니다. 단지

SKU

만 넘겨받았을 뿐입니다. 이

제

상태 관리

를 알아보면서 이 문제를 해결해봅시다.

16.4.6

상태 관리

리액트 애플리케이션의 계획과 설계의 핵심은 상태 관리이며, 보통은 단일 컴포넌트의 상태 관

리가 아니라 여러 컴포넌트가 어떻게 상태를 공유하는가입니다. 예제 애플리케이션이 몇 가지

상태를 공유하긴 합니다.

Vacations

컴포넌트는 컴포넌트에

Vacation

패키지 객체를 전달하

고,

Vacation ...