리액트에 데이터 불러오기
컴포넌트의 state를 정의해봅시다.부모 컴포넌트에 state를 설정해야 합니다. 여기에 값을 넣어두고 자식 컴포넌트들에게 전달하면 됩니다. 우선은 state를 선언만 하고 비워두었습니다. 우리는 api를 통해서 값을 불러올 것이기 때문에 api를 불러오는 것이 성공하면 state의 값을 변경하면 됩니다.함수는 하나의 기능을 가지면 됩니다.소제목 그대로 함수는 하나의 기능을 가지면 됩니다. 하나의 기능씩을 가진 함수들을 만들어서 api를 불러오도록 하겠습니다. 우선은 랜덤유저 생성기에서 api를 가져오는 함수입니다. 다수의 유저를 요청하는 방법은 "?results=원하는 숫자"를 뒤에 붙여주면 됩니다. 저는 12명을 요청할 생각이므로 "?results=12"를 붙이면 되겠군요. 처음은 _callApi라는..
fetch api 사용하기
fetch api란?fetch()는 네트워크 요청을 쉽게 활용할 수 있게 만들어줍니다. api를 가져올 때 예전에는 XMLHttpRequest을 사용했습니다. 하지만 지금은 fetch를 통해서 쉽게 가져올 수 있습니다. api를 통해 연습해보기 리액트 예시에서도 똑같이 사용할 api를 fetch() 예시에 사용해보겠습니다. 랜덤유저생성기는 자동으로 유저 정보를 생성해줍니다. 랜덤유저생성기 바로가기 10명의 정보를 가져오려 한다면 파라미터로 ?result=10이라고 붙여주면 됩니다.우선 fetch를 활용해보기 전에 무슨 값을 받는 지를 알아봐야 합니다. console.log(fetch("https://randomuser.me/api/?results=10")); fetch를 사용하면 어떤 값을 받게 될까요?..