이번 강의에서 우리는
이 PlacePicker(장소 검색기) 앱 작업을 하겠습니다
이 앱은 우리가 가고 싶어하는 곳을 고르고
가고 싶지 않은 곳은
지울 수 있도록 해 주는 앱입니다
이 앱 작업을 하는 동안
그리고 이 강의에서 함께
앱을 개선하는 동안
우리는 매우 중요한 리액트의 개념을 배울 것입니다
이 수업에서 여러분이 배우게 될 것은
리액트 앱에서의 side effect(부수 효과)입니다
먼저 부수 효과의 정의를 다루고
어떻게 관리해야 하는지를 다루고
이를 위해 부수 효과를 어떻게 제어해야 하는지
언제 리액트의 useEffect 훅을 사용하는게 좋은지 다루겠습니다
물론 이 훅을 사용하는 방법에 대해 익히고
의존성 모듈의 정의와 관리 방법, 그리고
useEffect를 사용하면 안 되는 상황에 대해서 배울 것입니다
물론 지금 시점에서는
이러한 것들이 다소 혼란스럽고 추상적으로 들릴테니
바로 본론으로 들어가서
부수 효과를 보여드리고 왜 특정 상황에서
useEffect 훅이 필요한지와
어떻게 사용하면 될지를 보여 드리도록 하겠습니다
이번 수업을 위해서는 이 앱을 준비했는데
이 초기 프로젝트는 사실
이미 잘 동작하고 있습니다
여러 장소를 보고, 선택할 수 있고
삭제할 수도 있습니다
그럼에도 우리는 이 앱을
이번 수업을 통해 개선하고 몇 가지 기능을 추가할 것입니다
항상 그래왔듯이
이 초기 프로젝트는
로컬 및 코드샌드박스 버전으로 첨부되어 있습니다
로컬 버전의 경우, 늘 그렇듯, npm install을 실행해 주시고
이어서 npm run dev를 입력해 주시기 바랍니다
코드샌드박스 버전에는 필요치 않은 부분입니다
이 프로젝트 코드를 보시게 되면
비교적 직관적인
몇 개의 컴포넌트를 보실 수 있습니다
State, Ref, Modal 컴포넌트와 같이
이미 여러분들이 배웠던 것들이고
forwardRef나 useImperativeHandle처럼
이전에 이미 배우셨던
기능들이 사용되었습니다
그렇기 때문에 크게 새로운 부분은 없을 것이고
앱 코드 또한 전반적으로 꽤나 직관적일 것입니다
결국엔 고른 장소인 pickedPlaces로 이루어진 이 배열을
사용자가 클릭한 것에 따라 장소를 추가하거나 삭제하는
방식으로 관리를 해 주면 됩니다
그런데 여기서 보셔야 할 것은
이 초기 프로젝트에는 이 장소 카드를 출력하는 역할을 하는
가짜 데이터가 잔뜩 들어있는
data.js 이라는 파일과
강의에서 계속 사용하게 될
장소 계산 로직을 담은
loc.js 파일입니다
이 파일, 구체적으로는 이 함수를
우리가 부수 효과를 처음으로 만나볼
다음 강의에서 다뤄 보도록 하겠습니다