자, 그럼 useEffect를 사용해서
이 코드를 개선하고 무한 루프의 문제를
고쳐보겠습니다
그러려면 useEffect를 리액트에서 가져와야 합니다
그래야 여기서 useEffect를 실행해서
Effect 함수에게 전달합니다
즉 의존성 배열로 전달하고
그리고 여기서 이 코드를 이동합니다
이 fetch 코드를 Effect 함수로 이동하겠습니다
Effect 섹션에서 배웠듯이
이 Effect 함수는 항상 컴포넌트 함수가
실행된 직후 즉시 실행됩니다
하지만 의존성이 바뀌었다는 전제 하에 그렇습니다
여기 빈 의존성 배열이 있습니다
그러므로 이 의존성들은 절대 바뀌지 않습니다
바꿀 게 없기 때문입니다
그러니까 이런 경우에는
이 컴포넌트 함수는 딱 한 번
이 컴포넌트 함수가 처음 실행되고 난 후에만 실행될 겁니다
하지만 Effect 함수는 그 이후에 다시는 실행되지 않으며
무한 루프에 빠지지 않습니다
그래서 이 코드로
이 places를 가져올 수 있고
그 places를 상태로 설정해서
이 밑에서 사용할 수 있습니다
이제 저장하고 나면, 프론트엔드인 리액트 서버와
NodeJS를 사용한 백엔드 서버 모두
잘 작동하고 실행되고 있습니다
다시 돌아가서 새로고침을 하면
place 데이터가 이 밑에 보입니다
가져온 데이터가 잘 작동한다는 의미입니다
하지만 물론 지금 보시면
여기 이미지들이 다 비어 있습니다
그 이미지들이 비어있는 이유는
이 places 컴포넌트에
availablePlaces를 출력할 때
이미지를 출력을 하려고는 하는데
src 속성을 접근하여
모든 장소의 이미지 속성을 접근하고자 합니다
가져온 비가공 데이터를 살펴보면
이 이미지 src 속성이 결국
이미지 파일의 이름을 담고 있다는 걸 알 수 있습니다
하지만 그 이미지 파일들을 실제로
백엔드 프로젝트의 이미지 폴더에 저장되어 있습니다
그러니까 그곳에서 이미지들을 접근해야 하는 것입니다
하지만 그 이미지 폴더로 직접 요청을 보낼 순 없습니다
전에 말했던 것처럼
기본적으로 모든 백엔드 프로젝트 코드와 파일 구조는
이용자가 접근할 수 없기 때문입니다
우리가 보낼 수 있는 요청은
확실하게 백엔드 코드의 허용을 받은 것들 뿐입니다
이제 이 코드를 보면
이미지 경로가 확실히 명시되어 있지 않습니다
대신 여기 있는 건 추가 코드인데
백엔드 서버의 이미지 폴더에 저장되어 있는 폴더를 알려줍니다
그 의미는 places.jsx 파일에 있는
프론트엔드에서 이 소스를 바꾸고
템플릿 리터럴(template literal)을 사용해서 대체할 수 있다는 겁니다
이 백틱 기호로 감싸준 이것입니다
그런 다음 localhost:3000 백엔드를 가리키는 URL을 작성하고
이미지 파일 이름을 지정합니다
이런 식으로 URL에 주입해 줍니다
이제 이건 잘 작동할 겁니다
이제 백엔드에 이미지 파일 요청을 보내기 때문입니다
그리고 제가 거기에 쓴 코드 덕분에
그 이미지 파일이 거기서 사용이 가능해졌습니다
이제 저장하면 이미지들이
모두 잘 표시되므로
성공적으로 데이터 fetching을 한 것입니다