1.Mock data 생성 후 각 컴포넌트에 적용하기

특정 폴더에 임시 json 형식의 data를 생성하고 fetch 함수를 통해 각 컴포넌트에 적용을 합니다.

위 사진과 같이 서버에서 json 형식의 파일을 받아 온다면 render가 된 후 한번만 실행할 componentDidMount 함수 안에서 실행하고

1.fetch("API 주소") -> 형식으로 적용하고 default method는 get이기 때문에 생략 하였다.
2..then((res) => res.json()) -> .then은 비동기와 관련이 되어 있지만 여기서는 서버로 부터 해당 data를 모두 받고 난 다음 실행한다고 생각하면 된다.
매개변수가 "res" 인 것은 임의로 지정한 것 이다. 보통 response의 줄임말인 res를 사용한다.
.json() 함수는 json 형식을 javascript 형식으로 변환하는 함수 이다.
3.

.then((res) => {
this.setState({
	films: res.films
});

마찬가지로 js로 변환이 완료 되면 해당 객체 형태로 된 data 해당 컴포넌트의 state로 관리를 한다.

위 사진과 같이 state로 관리한 data를 map 함수를 사용하여 각각의 데이터들을 해당 컴포넌트로 props로 전달해 주고 전달받는 컴포넌트에서 {this.props.해당name}으로 사용한다.