React Router, Rest 호출(Axios)

React에서 URL에 따라 컴포넌트를 렌더링하는 방법과 Axios를 이용한 REST API 호출,

 

그리고 Material-UI를 이용한 주소 검색 화면을 만들어봤다.

 

1. React Router

React Router는 URL에 따라 다른 컴포넌트를 보여줄 때 사용하는 노드 모듈이다.

예를 들어 아래처럼 동작한다.

/        → Home 화면
/editor  → Editor 화면
/grid    → Grid 화면

React Router 구조

사용자가 URL 이동
        ↓
BrowserRouter가 감싸고 있음
        ↓
Switch가 현재 URL 확인
        ↓
Route에 매핑된 컴포넌트 렌더링

---

메뉴 만들기

<ul>
  <li><a href="/editor">editor</a></li>
  <li><a href="/grid">grid</a></li>
  <li><a href="/">home</a></li>
</ul>

화면에서는 이런 식으로 보인다.

 

 

BrowserRouter로 감싸기

React Router를 사용하려면 라우팅이 적용될 영역을 BrowserRouter로 감싸야 한다.

import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li><a href="/editor">editor</a></li>
        <li><a href="/grid">grid</a></li>
        <li><a href="/">home</a></li>
      </ul>

      <Switch>
        <Route exact path="/editor" component={FunctionalComponentProps} />
        <Route exact path="/grid" component={GridComp} />
        <Route exact path="/" />
      </Switch>
    </BrowserRouter>
  );
}

참고: 기존 메모에 적은 <swiich>는 오타이고, 실제 코드는 <Switch>로 작성해야 한다.

---

Route 설정

<Route exact path="/editor" component={FunctionalComponentProps} />
<Route exact path="/grid" component={GridComp} />
<Route exact path="/" />

Route는 URL과 컴포넌트를 연결해준다.

/editor 주소 접속 → FunctionalComponentProps 실행
/grid 주소 접속   → GridComp 실행
/ 주소 접속       → 기본 화면 실행

---

exact 속성

exact는 URL이 정확히 일치할 때만 컴포넌트를 렌더링하게 해준다.

<Route exact path="/grid" component={GridComp} />

exact가 없으면 /grid/detail 같은 하위 URL도 같이 포함해서 매칭될 수 있다.

exact 있음
/grid        → GridComp 렌더링
/grid/detail → 매칭 안 됨

exact 없음
/grid        → GridComp 렌더링
/grid/detail → GridComp 렌더링 가능

 

 

 

실행 결과 예시

---

2. Rest 호출(Axios)

Axios는 REST API를 호출할 때 자주 사용하는 노드 모듈이다.

서버에서 데이터를 가져오거나, 저장하거나, 수정하거나, 삭제할 때 사용할 수 있다.

npm install axios

Axios의 기본 흐름은 아래와 같다.

React Component
      ↓
Axios로 API 요청
      ↓
REST API 서버
      ↓
응답 데이터 반환
      ↓
React 화면에 출력

---

Axios 예시 코드

import axios from "axios";

axios.get("/api/address")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

주소 검색 화면에서는 사용자가 입력한 주소를 기준으로 API를 호출해서 결과를 가져오는 방식으로 사용할 수 있다.

주소 입력
   ↓
onChange 이벤트 실행
   ↓
Axios로 주소 검색 API 호출
   ↓
검색 결과를 Grid에 출력

---

3. package.json dependency 추가

그리드와 화면 UI 구성을 위해 Material-UI dependency를 추가했다.

처음 React 프로젝트를 만들었을 때 기본 dependencies에
react-router-dom, axios, @material-ui/core, @material-ui/icons를 추가하면 된다.

{
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "axios": "^1.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.4",
    "react-scripts": "4.0.3"
  }
}

각 dependency 역할은 아래와 같다.

react-router-dom     → URL에 따라 컴포넌트 렌더링
axios                → REST API 호출
@material-ui/core    → Table, Paper, InputBase 같은 UI 컴포넌트
@material-ui/icons   → MenuIcon 같은 아이콘

---

4. GridComp 만들기

이번 결과물은 간단한 주소 검색 화면이다.

Material-UI를 사용해서 검색창과 테이블 스타일을 만들었다.

---

StyledTableCell

const StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  })
)(TableCell);

이 코드는 테이블 헤더를 검은색 배경, 흰색 글씨로 바꿔준다.

 

StyledTableRow

const StyledTableRow = withStyles((theme: Theme) =>
  createStyles({
    root: {
      "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover,
      },
    },
  })
)(TableRow);

이 코드는 홀수 번째 줄의 배경색을 다르게 보여준다.

1번째 줄  회색 배경
2번째 줄  흰색 배경
3번째 줄  회색 배경
4번째 줄  흰색 배경

표 형태의 데이터를 볼 때 줄 구분이 쉬워져서 가독성이 좋아진다.

---

5. 주소 검색 입력창 만들기

return (
  <div style={{ margin: 15 }}>
    <Paper className={classes.root}>
      <IconButton className={classes.iconButton} aria-label="menu">
        <MenuIcon />
      </IconButton>

      <InputBase
        className={classes.input}
        placeholder="address"
        inputProps={{ "aria-label": "search google maps" }}
        defaultValue={address}
        onChange={changeAddress}
      />
    </Paper>
  </div>
);

주의할 점
classname이 아니라 className
inputPorps가 아니라 inputProps
onchange가 아니라 onChange로 작성해야 한다.

---

주소 검색 화면 구조

 

IconButton 안에는 메뉴 아이콘을 넣고,
InputBase에는 주소를 입력할 수 있도록 했다.

---

전체 실행 화면 예시

 

6. export default

작성한 컴포넌트를 다른 파일에서 사용하려면 마지막에 export 해준다.

export default GridComp;

그리고 라우터에서 import해서 사용한다.

import GridComp from "./GridComp";

<Route exact path="/grid" component={GridComp} />

---

최종 정리

이번에는 React Router, Axios, Material-UI를 사용해서 주소 검색 화면을 만들어봤다.

React Router
→ URL에 따라 컴포넌트를 렌더링할 때 사용

Axios
→ REST API를 호출할 때 사용

Material-UI
→ 검색창, 버튼, 테이블 같은 UI를 쉽게 만들 때 사용

GridComp
→ 주소 검색 화면 컴포넌트

전체 흐름은 아래와 같다.

1. react-router-dom 설치
2. BrowserRouter로 전체 감싸기
3. Route로 URL과 컴포넌트 연결
4. Axios 설치
5. Material-UI dependency 추가
6. GridComp 주소 검색 화면 작성
7. /grid 접속 시 주소 검색 화면 출력

라우터는 화면 이동을 담당하고,
Axios는 서버와 통신을 담당하고,
Material-UI는 화면 디자인을 담당한다고 생각하면 이해하기 쉽다.