모두가 자주 사용하는 React 라이브러리 정리

리액트로 프로젝트를 시작할 때 보통 무조건 설치하고 시작하는 경우가 있습니다. 

이를 미리 정리해 두면 편리할 것 같아 작성해봅니다. 

 

리액트 사용자들은 대부분 아는 내용일 꺼라 생각됩니다만, 

혹시 리액트를 이제 막 시작하시는 분들은 도움이 되실꺼라 생각됩니다. 

 

제가 작성하고자 하는 라이브러리들은 다음과 같습니다. 

Router, Polyfill, Axios, Redux 입니다. 

앞으로 리액트에 관련된 정보글을 작성하면서 좀 더 세세하게 다루겠지만, 

우선은 어떤 라이브러리인지는 알아야 하니, 기본적인 사용 방법과 설명을 같이 적어 두었습니다. 😊

---

1. Router

라우터는 주소에 따라 부분 렌더링을 하는 라이브러리입니다. 

SPA에서 페이지 이동을 구현하면 거의 필수라고 생각하셔도 무방합니다. 

옛날 방식 처럼 전체 페이지를 전환하고 리소스를 다시 다운 받지 않고, 미리 받아두었던 리소스들을 주소에 따라 부분 적으로 변경해 주는 거라고 보시면 됩니다. 

npm install react-router-dom --save

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

function App() {
  return (
    <Router>
      <div>
        <Link to="/about">About</Link>
        <Link to="/service">Service</Link>
        <Link to="/qna">Qna</Link>
        <hr />
        <Switch>
          <Route exact path="/" component={Main} />
          <Route exact path="/about" component={About} />
          <Route exact path="/service" component={Service} />
          <Route exact path="/qna" component={Qna} />
        </Switch>
      </div>
    </Router>
  );
}

사용 방법은 사실 프로젝트에 따라 다르지만, 이게 아마 다들 사용하는 기본적인 구조일껍니다.

Link 태그에 url 주소를 넣고, 해당 링크를 클릭하면 하단에 Route의 path와 비교하여 컴포넌트를 뿌려줍니다. 

아주 간단하지요? 라우트에서 파라미터를 보낼 수도 있으며, 아주 유용합니다. 

 

2. Polyfill

리액트는 ES6문법을 사용하기 때문에 IE에서는 작동이 안되는 문법이 많습니다. 

서비스 환경이 ie에 국한되어 있지 않다면 상관 없지만, 한국에서는 ie 서비스를 안하는 프로젝트를 찾기 힘들지요. 

정말 프로젝트 할 때 마다 화가 나서 IE사용을 법적으로 금지했으면 좋겠다는 말도 안되는 상상을 하기도 했습니다. 😅

아무튼 폴리필 라이브러리가 모든 것을 받아주는 것은 아닙니다. 

폴리필 종류도 많고 사용하는 라이브러리 마다 추가로 지원해 주는 것도 있으니, 어떠한 라이브러리를 사용할때에는 브라우저 호환성도 살펴 보시기 바랍니다. 

그래도 기본적으로 설치해 줍니다. 설치 안하면 아예 IE 에서는 안돌아갑니다. 

이미 오래전에 리액트가 공식적으로 IE를 버렸거든요. 

npm install react-app-polyfill

혹시 프로젝트 중간에 설치 하게되면 제대로 동작이 안되는 경우도 있다고 합니다. 

그럴때는 react-app-polyfill 설치 후 캐시삭제 하고 재실행 해주세요.

캐시 삭제는 node_modules/.cache 디렉터리 삭제하면 됩니다. 

 

그리고 Polyfill 사용을 하려면 루트에 있는 index.js 파일에 import 해야합니다.

// IE9의 경우
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

그리고 package.json 파일안에도 추가해 주세요. 

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"   // <- 추가
    ]
  }  

그리고 npm start 를 하면 그래도 화면이 나오지 않습니다. 

이는 사실 저도 정확하게 아는것이 아닙니다. 

build 시에만 적용이 된다는 말이 있어서, build를 해보았습니다. 

( 혹시 아시는 분 댓글 남겨주세요! )

npm run build 
npx serve -s build 

build 이후 에는 화면이 잘 뜹니다. 

 

3. Axios

axios는 비동기 통신에 사용되는 라이브러리로 http 통신을 해야한다면 거의 필수적으로 사용됩니다. 

API통신을 위한 request와 response 사이에서 interceptor를 통한 처리도 쉽게 할 수 있고, Pomise를 지원하기 때문에 사용하기 용이합니다. 개인적으로 기존 ajax보다는 훨씬 사용하게 편합니다. 

npm install axios --save

 

axios도 상황에 따라 다양한 패턴이 사용됩니다. 

기본 구조는 이러하며, 사용시 finally는 꼭 사용하지 않아도 됩니다. 

axios.get('your url')
	.then(response => {
    	console.log("response => ", response);
    })
    .catch(error => {
    	console.log("Error => ", Error);
    })
    .finally(() => {
    	console.log("The End!");
    })

 

 

4. Redux (필수아님)

리액트에서 상태의 변화를 관리하기는 참 번거롭습니다. 

초반 스터디 할때에는 별로 힘들지 않은데? 라고 생각했다가, 복잡한 프로젝트에서 상태관리 라이브러리 없이 props을 미친듯이 주고 받아 곤욕을 치른적이 있습니다. 

사실 저도 리액트를 아직 공부하고 있는 단계입니다만, 리덕스는 참 어렵습니다. 

비동기 통신이 시작되면서 라이브러리도 너무 많고 상황에 따라 사용되는 패턴들도 늘어나서 정말 필요한 부분을 검색해서 사용하기 힘들더랍니다.. [그냥 제가 실력이 부족해서😥]

 

정리하자면, 초보자에게는 진입장벽이 높은 편입니다. 

굳이 사용하지 않아도 되는 소규모 프로젝트에는 그냥 props으로만 관리를 하거나 react자체에서 제공되는 useContext를 사용하시길 추천드립니다. 하지만 분명 리덕스의 강점이 있으므로, 어쨌든 사용해야 할 때가 있겠지요?

 

npm install redux react-redux redux-promise redux-thunk --save

npm install redux-devtools-extension

 

저는 주로 이렇게 한꺼번에 설치하는 편입니다. 

- redux는 리덕스 자체입니다. 

- react-redux는 리액트에서 리덕스를 사용하기 위해 중간 역활을 해주는 라이브러리 라고 생각 하시면 됩니다. 

  즉, 라이브러리를 라이브러리인 셈이네요. 

- redux-promise 는 promise를 사용하기 위한 라이브러리 입니다. 

- redux-thunk는 function즉 객체 대신 함수 형태를 사용하기 위한 라이브러리 입니다. 

redux-promise와 redux-thunk는 미들웨어를 통해 사용됩니다. 

- redux-devtools-extension 은 구글 확장앱을 사용하기 위한 라이브러리로 리덕스 사용시 state와 action을 실시간 감지할 수 있는 유용한 앱입니다. 필요하지 않다면 생략해도 되지만, 리덕스 사용할때는 권장합니다. 

 

루트인 index.js 파일에 다음과 같이 작성 해 줍니다. 

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers'

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
ReactDOM.render(
  <Provider
    store={createStoreWithMiddleware(Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()  // redux devtool 때문에 넣음
      )}
  >
    <App />
  </Provider>,
  document.getElementById('root')
);

이후 스토어, 리듀서, 액션을 생성한 뒤 사용하면 됩니다. 

이는 내용이 조금 길어질 것 같아 아주 간단한 예시만 들겠습니다.

// 액션 타입
const ADD = 'add';

// 액션 생성 함수
export const add = () => ({ type: ADD })

// 초기 상태
const initialState = {
	number: 0
}

// 리듀서
function add(state=initialState, action) {
	switch(action.type){
    	case ADD:
        	return { number: state.number + 1 }
        default: 
        	throw new Error(`Unable action type ${action.type}`)        	
    }
}

export default MyRedux;

이런식으로 사용하면 됩니다. 

리덕스는 사용하는데 있어서 많은 학습이 필요합니다. 

라이브러리도 다양하게 나오고 있으므로, 관심있으신 분들은 redux-toolkit, redux-saga 도 같이 찾아보세요! 

 

 

 

이 외에도 uuid, cookie, chart, datepicker 등등 라이브러리들이 아주 많습니다. 

그 중 리액트로 시작한다면, 소규모 프로젝트도 필히 설치하면 좋을 라이브러리들을 소개 했습니다. ( redux빼고 )

프론트 영역은 정말 빠르게 발전 하고 있어, 학습하며 따라가기 정말 힘듭니다. 

새로운 언어나 패턴이 나올수록 정말 기본을 튼튼하게 공부해야 한다는 걸 많이 느낀답니다. 

그럼 오늘도 즐거운 코딩 하세요~🥰