인자로 받는 요소 하나하나를 한 배열에 담아서 리턴
리액트에서는 배열을 기준으로 컴포넌트를 리턴할 때 사용 가능
예를 들어 나이키 홈페이지의 상품 소개 부분을 하나하나 리턴 가능
const arr = [1, 2, 3, 4, 5]
arr.map((num) => {
return <Component hi="hello" num={num} />;
});실제로 나오는 결과가
<Component hi="hello" num=1 />
<Component hi="hello" num=2 />
<Component hi="hello" num=3 />
<Component hi="hello" num=4 />
<Component hi="hello" num=5 />라이프사이클 잘 알기
componentDidMount() 컴포넌트의 마운트가 끝났다
마운트 됐다는게 렌더가 돌고난후 리턴이 끝났을때
단한번밖에 안불림
api 호출하면 좋음
데이터 로딩할때 쓰임 (렌더될때마다 불리면 무한루프)
뼈대를 만들고나서 데이터를 나중에 가져오겠다
setState 다시함
1. 백엔드 서버를 호출해서 원하는 데이터를 받는다
2. 받은 데이터를 이 컴포넌트의 저장소에 저장한다 (state에) -> setState 사용 (스테이트 업데이트되서 다시 렌더가 돔)
3. 사용한다
이게 componentDidMount 에서
- 최초에 컨스트럭터 불리고 렌더 불리고
fetch 정리
component에 들어있는 fetch
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
//.then(response => this.setState({monsters: response}))
.then(response => console.log(response))
}fetch는 데이터를 가져오는거 하나의 요청
벡엔드에다가 요청을하는것
fetch("api 주소") 요청을 보낸다
그거에 대한 대답이 돌아오는데 내가 요청한 데이터를 담아서 보내주는데
그 데이터가 돌아왔을때 즉 response가 돌아왔을때
인자로 그 대답을 받는데 페치에 대한 대답을 갖고와서
인증인가 했을때 jwt를 사용하는데 이거는 제이슨 타입이다
자바스크립트가 아니다 그러므로 자바스크립트에서 읽을 수 있도록 변환해줘야 한다
자바스크립트로 변환할수있게 자바스크립트에서 만들어준 함수가 response.json()
우리가 원하는 데이터는 바디에 있다
이 함수는 제이슨의 바디에 접근할 수 있도록 해준다
(제이슨에서 자바스크립트로 바꿔준다 자바스크립트 파일에서 써야하므로)
제이슨도 요청이 있을때 바꿔줘야하므로
then을 또 부른다
위에있는 리스폰스랑은다르다 뒤에오는 덴은 호출에 대한 모든 정보를 가져온다 (제이슨 바디에들어있는 데이터만 가져온다)
확인하기 위해서 콘솔을 먼저 찍어서 확인한다
위에 덴에 사용한 response에 대한 함수를 찍어서
아래와 같이 나온당 콘솔로 먼저 찍었을때
--승현님 세션 다시 설명--
fetch는 인자로 전달된 api 주소를 가지고 백엔드에 요청해서 데이터를 가져오는 하나의 요청 과정이다
요청을 보내면 대답이 돌아오는데, 여기서 대답은 내가 요청한 데이터이다
내가 요청한 데이터가 돌아왔을때, 데이터를 사용하기 위해서 .then()이라는 함수가 필요하다
.then() 안에 콜백 함수가 들어가는데 인자로 데이터 요청에 대한 대답(response)을 받는다
이 요청에 대한 답은 JWT 즉 JSON파일이라(fetch에 들어온 데이터는 JSON) JS에서 사용할 수 있도록 변환하는 작업을 먼저 해줘야 한다
JS에서 JSON을 변환하는 함수는 response.json()이다
여기서 JS에서 JSON을 변환하는 함수는 response.json()이다
이 함수는 JSON의 바디에 접근해서 우리가 원하는 정보를 리턴한다
그다음 그 데이터를 사용하려면 또 다시 .then을 불러
fetch("api 주소") // => 백엔드에 API 주소를 보내 데이터를 요청// => JSON body 를 JS로 변환하는 요청
// 인자로 내 요청에 대한 대답 (요청한 데이터에 대한 자료)를 가지고
// => JSON body 를 JS로 변환하는 요청 (JSON 파일을 JS에서 사용할 수 없으므로)
.then(response => response.json())
.then(response => {
// 먼저 console로 내가 원하는 데이터가 잘 들어왔는지 확인해보고
// response => console.log(response))
// data를 응답 받은 후 구현하고 싶은 로직을 적어준다
});
}강의 정리
과정을 풀어보면
constructor가 최초에 불리고 ->
render가 불리고 JSX를 return을 하면 ->
componentDidMount가 최초로 한번만 불린다 ->
만약에 이벤트가 발생해 state의 상태가 바뀌면 다시 render가 불려 진행되는데 ->
componentDidMount는 최초에 딱 한번만 불리기 때문에 이벤트 발생에 의해 다시 render되어도 진행하지 않는다 ->
그렇기 때문에 API 호출을 componentDidMount 하는 것이 좋다 ->
뼈대를 만들고나서 나중에 데이터를 채워넣겠다는 의미인데 ->
JSX에서 보여주는 데이터는 다 state에 있는데 ->
최초 constructor가 실행돼 state가 불리면 데이터가 없는 상태이다 ->
그럼 먼저 componentDidMount에서 setState를 하는데 ->
setState를 하면 render가 다시 진행되어 데이터가정상적으로 화면에 다시 보여진다 ->
