getStaticProps 렌더링 최적화

목차

1. /api/performances/new를 통해 데이터에 fetch가 안되는 문제
2. "data.map is not a function" Runtime Error로 데이터에 access가 안되는 문제

01. 문제 상황 : /api/performances/new를 통해 데이터에 access가 안되는 문제

현재 문제 상황 코드

1. api/performances/new 경로에서 data 가져오는 loadNew 함수
   
2. 메인페이지에서 getStaticProps 함수를 이용해서 loadNew 함수를 호출한 후 , 데이터를 props에 담는다.
   
3. Home 함수가 getStaticProps 함수에서 주는 newData를 받는다.
   
4. 실제 newData를 쓸 newProduct함수 한테 그 데이터를 내려준다.
   

02. 문제 원인 및 해결

추측 1. 현재 /api/performances/new 로 가져오는 data 자체에 오류가 있을 것이다. (미리 결론: 아니였음)

아니다. 접속했을 때, data가 잘 들어오는 걸 볼 수 있다.

추측 2. 경로 주소를 잘못 쓴 거 아닐까? (미리 결론: 해결)

파일에 따라 api 폴더 밑 파일에 접근하는 주소가 달라서 그런거 아닐까 생각이 들었다.
그러니 주소를 full로 다 써보자.

http://~ 로 시작해서 api 의 서버 주소에 접근했다.

그리고 데이터가 잘 들어오는지 확인하기 위해 console.log를 작성해줬다.

그랬더니, 이런식으로 data가 잘 들어오는걸 확인할 수 있었다.

문제 상황2: data.map 문제

이 문제는 보통 받아온 data가 배열 형식이 아닐 때 error가 생긴다.
왜냐하면 map 함수가 배열 데이터에서만 사용할 수 있기 때문이다.

현재 문제 상황 코드

NewProcucts 함수에서 data를 받아왔고,

그 데이터를 map을 통해 접근하고 있다.

문제 원인 및 해결

추측 1. data의 형식이 배열이 아닐 것이다 (미리 결론: 해결)

data가 어떻게 받아와지는지 확인하자.

useEffect를 통해 console로 data가 어떻게 받아와지는지 확인해보자.

그렇다 data는 객체이고, 그 안의 배열인 newData에 접근해야 한다.

그렇다면, 다시 코드를 전체적으로 수정해보자. (바로 아래에 작성함 !)

코드 작성

1. 데이터 fetch 하는 loadNew 함수
   
   주소 경로를 잘 설정해준 것을 확인할 수 있다.

2. getStaticProps 함수안에서 loadNew를 통해 데이터를 불러온다.
   
   참고로 Home 컴포넌트 => NewProducts 컴포넌트 로 데이터를 전달할 것.

03.Home 컴포넌트가 위 데이터를 매개변수로 가져온 코드

이름을 data => props로 변경해줬다.

• 아까 확인한 데이터는 객체였기 때문이다.
  • 추후에 props.newData 이런식으로 데이터에 접근할 예정
• 타입스크립트는 내 newData는 Performance와 같은 타입일 예정이고, 그 타입을 배열의 형태로 가지고 있는 NewData_TYPE으로 또 타입스크립트를 지정해줬다. => 즉, 요것이 props임

4. 하위 컴포넌트인 NewProducts에 props를 내려준다.
   

5. NewProducts 함수에서 props를 받아온 모습
   

6. props.newData로 데이터에 접근하는 모습
   

성공

이 데이터는 SSR 방식에서 => SSG 방식으로 데이터를 불러오는 방식을 변경했다.

추가

현재 메인 페이지에 있는 NewProducts 컴포넌트 말고,
MatinProducst 컴포넌트도 SSG 방식을 활용하고 싶어서, 코드를 같이 수정해줬다.

깨달은점

• getStaticProps 함수는 pages 파일에서만 써야 한다는 점
• 다른 파일에서 데이터를 fetch하고 getStaticProps 함수에서 호출하는 것이 좋다는 점
• getStaticProps를 통해 return한 데이터는 props의 형태라는 점