해당 수업을 통해 성취해야 할 학습목표를 잠시 살펴보도록 하자.

🚀 학습 목표

1. Array.map() 함수를 통해 컴포넌트를 재사용 할 수 있다.
2. Mock data를 만들어 백엔드 API 미완성 상태에서도 차질없이 개발할 수 있다.
3. componentDidMount 메소드에서 fetch 함수로 mock data를 가져올 수 있다.
4. 상수 데이터를 javascript 로 만드는 경우와 mock data를 JSON으로 만드는 경우를 구분하여 설명할 수 있다.

1. 상수 데이터
   1) 상수 데이터의 정의 및 사용 이유
   상수 데이터는 변하지 않는 데이터로, 정적인 데이터라고 생각하면 된다.
   상수 데이터를 사용하는 목적은 반복되는 UI를 하드코딩으로 일일이 만들어두게 되면, 코드가 길어져서 가독성에 좋지 않기 때문이다.
   이런 반복되는 UI를 상수 데이터 + Array.map() 함수의 조합을 이용해서 간결하게 표현할 수 있다.

2) 상수 데이터 사용 규칙

• 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있다.
• 대문자 + snake case 를 이용해서 변수의 이름을 지어야 한다.
• 별도의 JS파일로 분리할 경우 export / import를 해줘야 한다.

하단의 사진은 우리가 상수 데이터를 사용하기 전이다.
반복되는 내용을 comment component를 활용하여 하드코딩하고 있는것을 볼 수 있다.

그리고 이것을 CommentData.js라는 파일을 별도로 만들고 COMMENT_LIST라는 상수 데이터를 선언했다.
(정말 중요한건 해당 파일을 import할 때, 파일 경로는 똑같이 쓰지만 파일명이 들어가는 자리에는 파일명을 쓰지 않고 상수데이터의 이름을 써줘야 한다.
import COMMENT_LIST from './commentData'; )

그리고 CommentList.js에서 Array.map()메소드를 이용해서 Comment를 렌더링 한다.

• 상수 데이터의 길이가 너무 길거나, 여러개의 파일에서 공통적으로 사용하는 경우에는 위의 예시처럼 별도의 JS파일로 분리해서 사용하면 좋고, 해당 파일에서만 사용하는 간단한 상수 데이터의 경우에는 파일 내부에 선언해서 사용하기도 합니다.
  • 단, 이때 해당 파일에서 제일 중요한 내용은 컴포넌트이기때문에 중요도의 순서에 따라서 컴포넌트 다음에 상수 데이터를 선언해줍니다.

2. mock data
   1) mock data란?
   상수 데이터와는 다르게 동적인 값이다.
   백엔드 API 개발이 완료되지 않은 상태에서 실제 API에서 받아온 데이터가 아닌, 프론트엔드 개발자가 샘플로 만들어본 데이터이다.

2) mock data 사용 규칙
mock data는 실제 백엔드 API에서 응답값의 형태인 json !! 파일로 만들어줘야 한다. import도 export도 필요 없다!
그리고 파일의 위치는 public 폴더 > data 폴더 > '여기요'!!

3)

• javascript에서 http요청을 보낼때는 fetch 함수를 사용한다.
• fetch 함수는 첫번째 인자로 http 요청을 보낼 API주소, 두번째 인자로 요청을 보낼때의 옵션들을 객체형태로 받는다
• 데이터를 요청하는 시점을 특정해야하는데, 여기서는 componentDidMount 라이프사이클 메소드를 활용해서 component가 mount되는 시점에 데이터를 요청하고 요청이 성공적으로 완료되면 setState를 통해서 commentList state를 요청의 응답값으로 바꿔준다.