[React] 무작정 React 시작하기

 

React 설치

---

이 글에서는 무작정 리액트를 시작하는 법을 포스팅 하겠다.

 

윈도우라면 cmd창을, 맥이라면 터미널 앱을 연다

 

아래와 같이 설치를 진행한다.

 

 

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

 

create-react-app 은 리엑트 프로젝를 만들기 위해

 

따로 설정해야할 기본 세팅을 자동으로 해주는 세트아이템 정도로 생각하면 된다.

 

프로그래밍을 배우기 위해 컴퓨터를 사는데 메인보드, 그래픽카드, 램 등을 따로 사서 조립해도 되지만

 

편리함을 위해 조립 PC를 살 수도 있다.

 

create-react-app는 리액트를 하기위해 필요한 여러 라이브러리를 편리하게 세팅해주는

 

조립PC라고 생각하자.

 

 

npm start를 실행하면 아래와 같은 화면에 브라우저에 나온다.

 

 

자 이제 반은 끝났다.

 

 

필수 라이브러리 설치

---

리액트 어플리케이션을 만들때 필요한 라이브러리는 요구사항에 따라 많아질 수 있겠지만

 

몇가지 필수 라이브러리는 설치하고 개발을 시작하는 것이 좋다

 

 

 

1. react-router-dom

 

우리가 웹 어플리케이션을 만들게 되면 페이지가 하나인 어플리케이션을 만들지 않을 것이다.

 

여러 페이지를 만들고 그것이 유기적으로 왔다갔다 하는 어플리케이션을 구성할 확률이 높다.

 

그럴때 리액트 어플리케이션의 이동을 담당하게 될 라이브러리가 react-router-dom 이다

 

 

npm install react-router-dom

 

 

설치 후 소스에 라우팅 세팅을 해준다.

 

 

보통 page 소스를 다 모아두는 pages 폴더를 만들고 아래에 페이지 소스들을 만든다.

 

위처럼 구성한 이후 App.js로 들어가보자

 

import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; //router모듈 import
import Home from './pages/Home'            //만든 Home 페이지 소스 import

function App() {
  return (
<Router>    
	<Switch>
      <Route exact path="/" component={Home}/>   {/* 경로에 따른 페이지 구성 */}        
      {/* <Route path="/a" component={Home}/> */}
      {/* <Route path="/b" component={Home}/> */}
    </Switch>
</Router>
  );
}

export default App;

 

위와 같이 라우트 세팅을 해주면 된다.

 

이제 프로젝트에 필요한 페이지 소스를 pages 아래 만들면 '/이름' 형태로 만든 페이지의 주소를 정해주고

 

route에 추가해주면 된다.

 

 

 

 

2. axios

 

다음은 axios이다. 이것은 ajax 통신을 통해 서버의 데이터들을 받아오는 통신 모듈이다.

 

웹 어플리케이션 내부에서 모든 데이터를 가지고 기능을 수행하는 프로젝트는 아예 없을 것이다.

 

대부분 백엔드가 따로 있고 그곳에서 데이터를 받아서 페이지를 구성하는 방식으로

 

진행될 것이다.

 

그럴때 꼭 통신 모듈이 필요하기 때문에 axios를 설치해 준다.

 

npm install axios

 

 

pages 폴더 아래 통신 모듈을 관리할 service 폴더를 만들어 주고

 

BaseService.js 파일을 생성해 준다.

 

여기에 기본적으로 필요한 통신 모듈을 정의해 둘 것이다.

 

 

import axios from "axios";

export default class BaseService {

  static getInstance() {
    if (!BaseService.instance) {
      BaseService.instance = new BaseService();
    }
    return BaseService.instance;
  }
  config={
    method: '',
    url: '',
    headers: {'Content-Type':'application/json'},
    data: {}
  }

  async fnRest(method, url, requestBody){
    
    this.config.method = method    
    
    this.config.url = 'https://exampleURL.com/' + url      //뒤에 붙여서 필요한 호출

    this.config.data = requestBody
    try {
      console.log("axios request url : " + url + ", requestBody : " + requestBody)
      const response = await axios.request(this.config)
      console.log(response)
      if (response.status === 200) {
        return response.data
      } else {
        const noResponseError = {
          successOrNot: 'N',
          statusCode: 'NO.RESPONSE',
          data: {}
        }
        throw noResponseError
      }
    } catch (errorResponse) {
      if (errorResponse && (errorResponse).error) {
        const errors = {
          successOrNot: 'N',
          statusCode: 'ERROR.RESPONSE',
          data: errorResponse.data
        }
        throw errors
      } else {
        const unknownError= {
          successOrNot: 'N',
          statusCode: 'UNKNOWN.SERVER',
          data: {}
        }
        throw unknownError
      }
    }
  }


}

 

위와 같이 통신 모듈을 정의해 둔다. 기본적인 에러처리와 해더 세팅, POST인지 GET인지 등을 구분하는

 

메소드 세팅 등을 기본적으로 해준다.

 

그리고 통신이 필요한 순간 이 클레스의 인스턴스를 가져와 호출에 사용하도록 한다.

 

 

3. Material-UI

 

다음은 Material-UI 다. 이것은 자주 쓰이는 html 화면 및 그에 맞는 기능을 만들어 놓은

 

라이브러리이다.

 

체크박스를 만들려면 input 태그를 시작으로 타입을 체크박스로 두고 이것을 체크했을때의 이벤트 등을

 

새로 정의해야한다. 또한 스타일도 CSS를 활용해 체크가 됬을때와 안됬을때를 나눠 적용해야한다.

 

Material-UI를 쓰면 이 작업이 반 이상 줄어든다.

 

설치해 두고

 

npm install @material-ui/core

npm install @material-ui/icons

 

아래 공식문서를 보면서 필요한 화면과 기능을 가져다 쓰면 된다.

 

 

Installation - Material-UI

 

 

이렇게 무작정 시작하는 리액트 환경 구성을 해보았다.

 

다음 포스트 부터는 화면들을 하나씩 만들어 보며

 

리액트의 감을 익혀보겠다.