컴포넌트 함수에 이와 같은
부수 효과가 있다는 것이
꼭 문제가 되는 것만은 아닙니다만
여기에서는 문제가 되는데, 그 이유를 보여드리겠습니다
이제 sortedPlaces의 데이터가 얻어졌으니
이 sortedPlaces의 내용을
화면에 보여주고자 합니다
특히나 Places 컴포넌트의 이부분의 사용인데
여기 있는 가짜 데이터인 AVAILABLE_PLACES가 아닌
정렬된 장소 리스트를 입력값으로 전달하고자 하는 것입니다
물론 이 정렬된 장소들은, 앞서 설명했듯이
처음부터 사용이 가능하지는 않습니다
사용자의 위치를 파악하는 작업에
얼마간의 시간이 소요되기 때문입니다
그렇기에 우리가 이 위치 데이터를 얻을 때쯤이면
컴포넌트의 첫 렌더링 작업이 완료된 이후일 것입니다앱
그렇기에 이곳에 상태가 필요합니다
이 상태를 이용해서
이렇게 마지막에는
availablePlaces와
setAvailablePlaces 업데이트 기능을 관리해야 합니다
일단은 비어있는 배열로 시작해서
이 상태를 sortedPlaces로
설정해 둡니다
사용자의 위치를 파악하는
작업이 완료되면
그것이 새로운 렌더링 작업을 실행시켜서
상태는 정렬된 장소들로 업데이트될 것이고
우리는 업데이트된 AVAILABLE_PLACES를
여기에 있는 두 번째 Places 컴포넌트에
미가공된 가짜 데이터 대신 전달할 수 있게 됩니다
이것은 좋은 해결책처럼 보이지만
사실은 단점이 있는 방안인데
이것은 무한의 루프(loop)를 야기하기 때문입니다
왜 그럴까요?
그 이유는, 우리가 이곳에서 상태를 업데이트하는데
배우셨다시피, 이러한 상태 업데이트 함수를 호출한다는 것은
리액트에게 상태가 포함된 컴포넌트 함수를
재실행하라는 것과 같은데
이 경우에는 그것이 이 앱 컴포넌트이기 때문입니다
그렇다면 이 컴포넌트 함수가 재실행되면 어떤 일이 일어날까요?
사용자의 위치 파악이 다시 진행되고
상태 설정을 하고
컴포넌트 함수를 다시 실행하고
위치 파악을 다시 하고
상태 설정을 하고, 어떻게 돼가는지 보이실 겁니다
무한 루프가 시작되는 것이고
이것은 우리 앱을 망가뜨릴 것입니다
그리고 이것이 부수 효과를 잘못 사용할 경우
일어날 수 있는 문제의 예시였습니다
그러면 이제 이러한 문제를 해결해 줄 수 있는
useEffect 훅에 대해 알아보도록 하겠습니다