활용 예시

• 커피 회사 홈페이지를 만들 때 백엔드 API 없이 mock data를 사용해서 커피 사진들을 커피 메뉴 페이지로 불러와서 사용한다.

• public 폴더 안에 data 폴더를 만들어서 그 안에 Mock Data인 JSON 데이터를 생성했다.

• src 폴더안에 커피 메뉴 페이지를 만드는 JS 파일에 커피 사진 데이터를 담고 있는 JSON을 불러올려고 한다.

활용 방법

1. mock data 생성

• public > data 폴더 안에 imgData.json이라는 JSON 파일을 만들고 mock data로 커피 사진과 커피 이름을 객체 형태로 만들었다.

• key는 img로 했고 그 키에 값인 value는 사진의 경로를 넣었다.

• 사진은 public 폴더 안에 이미지 폴더를 따로 만들어서 넣었다.

2. 커피 메뉴 페이지에 사진 넣는 위치를 컴포넌트로 만들기

• 기존의 코드에서는 사진 여러 개를 메뉴 페이지에 넣으면 사진 개수만큼 코드를 하나 하나 작성하였는데, 지금은 하나의 컴포넌트를 만들어서 그 컴포넌트를 사진 개수만큼 map 함수를 통해 반복해서 불러온다.

• ImgList라는 컴포넌트 이름을 주었는데 이 때 컴포넌트 이름의 첫 글자는 대문자로 주었다.

• 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문에 HTML 태그는 소문자로, 컴포넌트는 대문자로 작성한다.

• 컴포넌트에 props를 추가했는데, 이 props는 쉽게 말해서 매개변수로 부모 요소의 데이터를 자식 요소로 전달해주는 역할을 한다.

• 위에 있는 컴포넌트에서 props는 return 값 안에 커피 이미지 경로와 커피 이미지 이름을 넣기 위해 쓰였다.

3. 커피 메뉴 페이지에 useEffect로 JSON 불러오기

• List라는 페이지 내에 useState를 넣어서 빈 배열의 state를 만들고, 그 state를 다루는 함수를 만든다.

• useEffect를 통해서 JSON을 불러오는데, 이 때 fetch안에 http://localhost:3000/data/imgData.json을 API 주소로 생각하고 API 요청을 보내서 응답을 받는다.

4. 불러온 JSON을 map 함수로 반복해서 리턴하기

• List return 값 안에 커피 사진이 있어야 할 위치에 map 함수를 넣어준다.

• 컴포넌트 ImgList를 가져온 다음에 ImgList의 props에 JSON을 넣어준다.