React Ajax

이번 시간은 React Ajax에 대해서 알아볼거에요.

Ajax는 'Asynchronous JavaScript and XML'로 뜻 그대로 해석하면 비동기적 자바스크립트와 xml로 비동기적으로 xml을 가져올 수 있는 방법입니다.(최근엔 xml보다 json을 많이 사용하는데 json도 가능힙니다)

 

여기서 동기와 비동기에 대한 용어를 알고 넘어가셔야 합니다

 

동기는 직렬적인 느낌으로 하나의 코드의 해석이 끝나야 다음 코드로 넘어가는 것이고

비동기는 병렬적인 느낌으로 하나의 코드 해석이 끝날때 까지 기다리지 않고 동시에 진행이 가능합니다.

 

동기는 그냥 순서대로 해석을 하면 되니 순서만 잘 정리하면 되지만

비동기는 동시에 여러가지가 가능하니 언제 시작될지 타이밍을 정하면 됩니다.

이 말은 우리가 원하는 타이밍에 시작을 할 수가 있다는 것입니다.

 

쉽게 예를들면 게시판 기능을 생각하시면 됩니다.

1 2 3 4 5

의 게시판 목록이 있을 때 1번을 다 보고 2번을 누른다고 해서 페이지가 새로고침 되며 정보를 불러오는게 아닌

다른 부분은 그대로 놓고 필요한 부분의 정보만 불러와서 reload되게 만들 수 있습니다.

(리액트의 장점이 싱글웹앱인데 누를 때 마다 새로고침되며 처음부터 다시 로딩된다면 장점이 사라지겠죠?)

 

 

 

XML도 가능하지만 저는 JSON으로 사용해보도록 하겠습니다.

글목록을 내부에 있는 JSON에서 가져와 표현하고 싶을때나 server에서 JSON file을 불러와 그 것을 rending할때 쓸 수 있습니다.

Server은 나중에 배우고 지금은 글 목록에서 JSON을 가져오는것을 배울 것입니다.

자 이제 React에서 Ajax를 어떻게 사용하는지 배워보도록 하겠습니다.

 

1. JSON file만들기

 

React의 index.html이 있는 dirctory인 public directory안에 json을 만듭니다.

저는 1.json 2.json 3.json 으로 만들었습니다.

 

React Ajax

 

2. fetch를 통해 정보가져오기

 

 fetch('url')

.then(res => {return res.json()})

.then(json => {console.log(‘성공’)})

 

url에 있는 파일은 텍스트에 불가하지만 안의 내용을  json 이라는 data type으로 바꿔서 js가 읽을수있도록 변환해서 가져옵니다.

(res.json()을 통해.)

 

위의 코드를 해석하자면

fetch를 통해 url에 접근을 합니다. 여기서 url로 '1.json', '2.json', '3.json' 등 만들어 놓은 json파일 명을 적습니다(directory가 맞지않으면 error가 날 수 있기 때문에 directory설정을 잘 하셔야합니다. 저는 json파일을 public directory에 넣었고 fetch를 실행하는 component는 src 폴더 안에 있습니다.)

 

.then 은 fetch를 통해 해당 url데이터를 다 가져왔으면 다음 코드를 실행하라는 것입니다. 

.then(res => {return res.json()}) 이라하면 fetch를 통해 데이터를 다 가져오고 가져온 데이터를 res 라 명명하고 그 res는 텍스트내용이기 때문에 res.json()을 통해 json형식의 파일로 변환하라는 것입니다.

이 후 다시 .then(json => {console.log(‘성공’)}) 을 써서 json 파일로 변경한 것을 json이라고 명명하고 그 것이 실행이 되었을 때 console에 '성공' 이라는 문자를 내보내라는 것입니다.

 

 

3. loading중 화면 만들기

 

처음에 state를 false로 만들어주고

componentDidMount의 setState 통해 true로 만들어줍니다.

render가 되거나 fetch를 통해 ajax처리가 완료됬을시 setState를 통해 다시 false로 만들어줍니다.

ture일때 loading중을 띄우고

false일때 나와야할 내용이나 component를 넣으면 끝입니다.

 

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.