230214 React x AJAX

리액트에서 JSP 파일을 읽는다.
jsp의 경로는 빌드 후 배포한 react파일과 도메인이 같아야한다.

<script>
import React, { Component } from "react";

class MyAjax extends Component {
  //생성자
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
    };
  }
  //lifeCycle + ajax
  componentDidMount() {
    //컴포넌트가 로드되면,
    fetch("/abc2react/react_test.jsp", { method: "GET" }) //XHR의 역할을 함
      .then((res) => res.json()) //json을 받고 아래에서 처리함
      .then((result) => {
        this.setState({
          isLoaded: true,
          items: result,
        });
      }),
      (error) => {
        this.setState({
          isLoaded: true,
          error,
        });
      };
  }

  render() {
    const { error, isLoaded, items } = this.state;

    if (error) {
      return <div>Error:{error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading..</div>;
    } else {
        <ul>
            {items.map(item => (
                <li key={item.id}>
                    {item.name} {item.price}
                </li>
            ))}
        </ul>
    }
  }
}

export default MyAjax;
</script>

1. React lifeCycle에 ajax fetch.than을 사용했다.
2. fetch에서 XMLHttpRequest의 역할을 하며 then에서 jsp를 로드하고, 요청방식을 get방식으로 명시한다.
3. 로드가 되면 setState로 json형식 state를 생성한다.

• render()

1. state를 한번에 선언하고 if문으로 상태에 따른 예외처리 코드를 작성했다.
2. 정상적으로 로드가 된다면 .map메소드로 jsp내용을 처리하여 <li>태그로 테이블화 하여 출력했다.

빌드,배포 후 tomcat에서 열기

도메인통일, homepage 설정 후 >npm run bulid 로 빌드한다.

빌드파일을 복사, 붙여넣기 후 결과를 확인했다.