API 호출
(백엔드 서버 호출)
-
API는 백엔드랑 통신해서 받아오는 과정의 모든 것이라고 생각하면 된다.
-
JSON은 객체 값을 갖고오듯이 가지고올 수 없고 JSON을 자바스크립트로 변환해주는 과정이 fetch안에 들어와있다.
데이터가 들어 왔을 때 하고자 하는 것을 함수형태로 넣어줌. -
.then(response => response.json())-> fetch함수에 대한 response고 이를 가지고 json함수를 부른다. 이게 바로 JSON을 자바스크립트 형태로 변환해주는 것.(response의 단어는 변수 이름처럼 마음대로 정해줘도 되는데 가장 많이 쓰는 변수이름은 res.(response의 줄임말) -
then(json=> console.log(json));이게 자바스크립트의 형태로 JSON을 받아서 실행하려고 하는 함수이다.
componenetDidMount()
- 최초 렌더시(construnctor -> render -> return -> componenetDidMount()실행) JSX 리턴문까지 끝나면 딱 한 번 불리는 함수.
- state값이 변하면 render가 재호출되는데, (업데이트 된 값을 보여주기 때문)
- 문자 그대로 컴포넌트에 마운트가 된 다음 실행하려고 하는 함수이다..
- 리턴에서 값을 바꾸고 세이브를 하면 새로 컴파일이 되는 것과 같다. 처음부터 다시 다 불러오는 것. 여기서 리액트는 SPA로 작동하므로 장점을 다시 상기할 수 있다.
*SPA : 싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
fetch 함수를 최초의 데이터를 가지고 와서 state에 저장해서 화면에 보여주기 위한 것이므로 componenetDidMount에서 실행하는 것이 효과적.
constructor에서도 가능하다. 이건 개발자마다 사바사.. constructor 생략하는 개발자도 많기 때문에.
fetch
fetch("url")
.then(res => res.json()) -> 위험하다. json데이터는 항상 가져오는게 아니므로. 그래서 이 전에 console.log(res) 확인을 해볼 것.
fetch("url")
console.log(res) -> 잘 확인이 되면 다시 불러오기
.then(res => res.json())
.then(res=> console.log(res)); -> 이러면 뭐가 들어오는지 잘 알 수 있음. 예를 들어서 내가 필요한 정보가 여러 객체의 값 중 하나 이면 그것만 필요하기 때문에 그것만 가져오면 된다. 불필요한 정보를 안넣어줘도 됨.
**console.log** 로 항상 확인해볼 것! JSON에서 데이터를 받아올 때 객체일 수도 있고 배열일 수도 있으므로, 처음 state에서 빈 배열을 해줄 수도 있고 빈 객체를 해줄 수 도 있음.
fetch는 비동기 함수
-
비동기는 요청을 보내고 나서 값이 변경되던 말던 우선 요청을 보내는 것이고, 이후 콘솔로그를 찍어보면 변경된 값이 아닌 초기 값이 찍힌다.
끝났을 때 뭘 하고싶은지만 정확하게 알고있으면 된다. -
.catch()로 에러를 확인할 수 있음.
*리액트 life cycle 체크..
디버깅... console.log로 항상 확인 할 것..
componenetDidMount() <-> componentUpdate() 매번 불리는 라이프사이클 함수
map
맵 돌릴 때 요소 하나하나에 고유한 key값이 정해지면 좋은데, 예시로는 email, 폰넘버 등이 있음.
filter
** 입력할 때마다 POST가 호출되는 예시 : 검색
POST시에fetch는 두가지 인자를 받는다. API, header에 해당하는 객체.
{
method : "POST",//POST메소드 써줘야함.
body : //보내줄 데이터의 json형태가 들어감.JSON.stringify({
email : "yojuyoon@velog.com",
password:"12345a"//이건 자바스크립트다. GET과는 반대로 내가 보내줄 자바스크립트 데이터를 JSON형태로 바꾸라고 요청하는 것. //이건 하드코딩. 스테이트값으로 지정해주는 것이 좋음
객체를 미리 변수로 만들어주고 obj로 불러와도 됨.
})
})
.then(res => res.json()) // json바디를 json으로 변환
.then(res => console.log(res))
this.props.history.push("./main")또는
모달을 띄울 수도 있음
}
.then(res => sessionStorage.setItem("access_token"//키값(내가 정하는), res.access_token)) //토근 저장
- 페북같은 경우에는 로그인 정보를 오랫동안 유지하고있는데, 이런 경우에는 로컬스토리지에 저장해도 되고
- 은행같은 경우에는 쿠키나 세션(사용자 경험을 중요시 할 경우) 사용
스토리지에 저장하는 방법을 알아야함.
두번째 .then의 res에 토큰이 저장되는데, 객체의 형태를 띄고있음.
