[React] Ajax 찍먹하기

서론

글을 시작하기 전 Ajax는 처음 접해보는 거라 설명이 많이 부족할 수 있다!

이제 공부하는 책의 막바지여서 신난다. 얼른 끝내서 강의 보고싶당 ㅎㅎ

 

실습 준비

npx create-react-app react-ajax

Ajax를 해보기 전 먼저 프로젝트를 만들어준다.

프로젝트만 몇 번째 만드는지 모르겠지만 책이 하라는대로 해보자.

그리고 원활한 이해를 위해 index.css, App.css를 모두 지워준다.

 

마지막으로 index.js와 App.js를 다음과 같이 정리(수정)한다.

index.js, App.js

위와 같이 나온다면 잘 된 것이다.

이제 public 폴더 안에 list.json을 생성하고 사진과 같이 작성해보자.

[
    {"id":1, "title":"HTML"},
    {"id":2, "title":"CSS"},
    {"id":3, "title":"JS"}
]

Json 형식의 텍스트 파일인데, JS로 치면 길이가 3인 배열 안에 3개의 객체가 들어 있는 형식의 데이터이다.

그리고 각각의 id에 따른 상세정보를 (id).json에 작성한다.

1.json, 2.json, 3.json

이렇게 Ajax를 통해 가져올 데이터를 완성했다.

이걸 이용해 list.json에서 글 목록을 읽어와 js를 이용해 리스트 태그를 생성하고,

각 링크를 클릭했을 때 해당하는 데이터를 json 파일에서 읽어서 article의 내용을 채울 것이다.

 

Ajax로 컴포넌트 초기화하기

import './App.css';
import React, { Component } from 'react'

class Nav extends Component {
  render() {
    return (
      <nav>
        <ul>
          <li><a href='1'>HTML</a></li>
          <li><a href='2'>CSS</a></li>
          <li><a href='3'>JS</a></li>
        </ul>
      </nav>
    )
  }
}

function App() {
  return (
    <div className='App'>
      <h1>WEB</h1>
      <Nav></Nav>
      <article>
        <h2>welcome</h2>
        Hello, React &amp; Ajax
      </article>
    </div>
  );
}

export default App;

먼저, Nav 컴포넌트를 만들고 return값에 원래 <nav> 태그 안에 있던 내용을 복붙한다.

웹 UI상으론 아까와 똑같이 보일 것이다.

 

class Nav extends Component {
  componentDidMount() {
    fetch('list.json')
      .then(function(result) {
        return result.json();
      })
      .then(function(json) {
        console.log(json);
      }.bind(this));
  }

  render() {
    생략
  }
}

Nav 컴포넌트를 이렇게 수정했다.

componentDidMount는 컴포넌트 클래스의 메서드 중 컴포넌트가 만들어지기 직전 시점에 호출된다. 따라서 컴포넌트를 초기화할 때 네트워크 통신을 하기에 최적인 메서드이다.

이 메서드에서 fetch API를 쓰는데, fetch API는 첫 번째 인자로 가져오려는 데이터의 주소를 받는다.

 

그리고 list.json에 담긴 데이터를 브라우저가 가져오면 가져온 데이터를 어떻게 처리할 지 첫 번째 then 함수에 구현한다. -> then 함수의 인자로 전달된 함수는 list.json의 호출이 끝난 다음에 호출 된다.

 

함수의 인자로 전달된 result를 대상으로 json() 메서드를 호출하면

list.json 파일의 데이터를 자바스크립트 객체로 변환한다.

변환된 js 객체는 두 번째 then 함수의 인자인 함수의 첫 번째 인자로 전달된다.

콘솔 창을 통해 json 파일의 데이터가 js 객체로 바뀐 것을 확인할 수 있다.

 

class Nav extends Component {
  state = {
    list:[]
  }

  componentDidMount() {
    fetch('list.json')
      .then(function(result) {
        return result.json();
      })
      .then(function(json) {
        console.log(json);
        this.setState({list:json});
      }.bind(this));
  }

  render() {
    var listTag = [];
    for(var i = 0; i < this.state.list.length; i++) {
      var li = this.state.list[i];
      listTag.push(<li key={li.id}><a href={li.id}>{li.title}</a></li>);
    }
    return (
      <nav>
        {listTag}
      </nav>
    )
  }
}

Nav 컴포넌트 클래스 state에 빈 리스트를 생성한다.

그리고 두 번째 then 함수에서 전달받은 js 객체를 빈 리스트(list)에 저장한다.

그 다음, render 함수에서 빈 리스트(listTag)를 만들고 push 함수로 하나하나 넣는다.

그리고 이 listTag를 UI상으로 보여준다.

 

지금까지 한 내용을 정리하자면

1. 컴포넌트 생성 시 Ajax를 통해 해당 컴포넌트를 초기화해야 하는 경우엔 componentDidMount 메서드를 사용한다.
2. Ajax를 사용해 가져온 데이터로 직접 렌더링에 영향을 주는 것이 아니라 state에 넘긴 다음, render 메서드가 state의 변화에 영향을 받아 처리하도록 구현한다.

 

담소

글이 길어져 Ajax 맛보기2로 돌아오겠당