리액트에 데이터 불러오기

컴포넌트의 state를 정의해봅시다.

부모 컴포넌트에 state를 설정해야 합니다. 여기에 값을 넣어두고 자식 컴포넌트들에게 전달하면 됩니다.

우선은 state를 선언만 하고 비워두었습니다. 우리는 api를 통해서 값을 불러올 것이기 때문에 api를 불러오는 것이 성공하면 state의 값을 변경하면 됩니다.

함수는 하나의 기능을 가지면 됩니다.

소제목 그대로 함수는 하나의 기능을 가지면 됩니다. 하나의 기능씩을 가진 함수들을 만들어서 api를 불러오도록 하겠습니다. 우선은 랜덤유저 생성기에서 api를 가져오는 함수입니다.

홈페이지에서 들어가시면 여러 요청 방법들이 나옵니다.

다수의 유저를 요청하는 방법은 "?results=원하는 숫자"를 뒤에 붙여주면 됩니다. 저는 12명을 요청할 생각이므로 "?results=12"를 붙이면 되겠군요.

처음은 _callApi라는 함수를 만들었습니다. 이 함수에서 그 전에 다뤘던 fetch와 promise에 대한 것들을 이용해야 합니다. 이 함수는 fetch를 통해 랜덤유저생성기에서 데이터를 프로미스 형태로 가져오고 그 값을 json으로 바꾼 다음에 console.log를 통해 값을 확인하는 함수입니다. 함수를 생성했으니 함수에 오류가 없는지 확인해볼까요?

리액트의 라이프 사이클

우리가 만든 _callApi함수를 어디에서 확인할까요? 리액트 컴포넌트에는 라이프 사이클이라는 개념이 있습니다. 우리는 바로 성인이 되지 않고 유아기, 청소년기를 거친 다음 성인기가 되는 것처럼 리액트에도 순서에 따라 실행되는 함수들이 있습니다. 그 중에 하나가 componentDidMount라는 함수입니다. 이 함수는 render 함수 다음에 실행되는 함수입니다. 

componentDidMount 함수 안에서 우리가 만든 _callApi를 호출했습니다. 개발자 모드를 켜고 콘솔창을 확인해보면 우리가 요청한 값이 에러없이 왔는지 확인할 수 있습니다.

에러없이 잘 호출된 것을 확인할 수 있습니다.

콘솔창에 Object라는 것이 있고, 눌러보면 우리가 요청한 값인 것을 확인할 수 있습니다. 우리는 12명을 요청했죠? Object의 results라는 키 안에 12명의 정보가 들어있습니다. 값을 확인하기 위해 console.log(json)을 했지만 우리가 필요한 값이 results라는 키안에 있다는 것을 알았으니 해당 코드를 "json => json.results"로 바꿔주세요.

또 다른 연습으로는 더 많은 사람수를 요청해보거나 api를 통해서 여성 또는 남성의 프로필만 요청해보세요.

다음 포스팅에서는 우리가 가져온 값을 state에 넣어보도록 하겠습니다.