DAiNO

PostsProjectAbout
DEV

React JS Trending Library

React 최신 라이브러리에 대하여

2022-05-13

1.Redux

Image

Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다. Redux(리덕스)의 본질은 Node.js 모듈이다, 아주 많이 사용되며 대표적인 라이브러리로 쓰이고 있다.

Image

Redux의 세가지 원칙

  1. Single source of truth
  • 동일한 데이터는 항상 같은 곳에서 가지고 온다.즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.
  1. State is read-only
  • 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
  1. Changes are made with pure functions
  • 변경은 순수함수로만 가능하다.리듀서와 연관되는 개념이다. Store(스토어) – Action(액션) – Reducer(리듀서)

2. CRA(create-react-app)

Image

ReactJS 프로젝트를 시작할 때 필요한 개발 환경을 세팅 해주는 라이브러리이다. 자동으로 Webpack 설정을 해주며, 기본설정을 자동으로 세팅 해준다.

장점

  • 직접 세팅하며, 신경 쓸 코드량이 적다.
  • Webpack 설정을 거의 신경쓰지 않아도 된다.

단점

  • React-scripts로 인한 추상화로 설정 flow 이해가 어렵다.
  • 추상화 난이도가 높아서 라이브러리 적용시 Webpack 코어 부분의 수정이 용이하지 못함.

3. Styled Components

Image

ReactJS 프로젝트에서 사용되는 CSS-in-JS 라이브러리. 별도의 CSS 파일을 생성하지않으며, 컴포넌트 단위의 스타일링이 가능하다.

장점

  • SCSS 라이브러리를 직접 설치할 필요없이, 문법을 바로 사용이 가능하다.
  • 별도의 CSS 파일을 생성하지 않기 때문에, 찾거나 사용할 때 용이하다.
  • CSS안에서도 props를 이용하여, JSX문법의 접근하며 서로 연결되기 때문에 호환이 좋다.

단점

  • CSS를 사용하게 될 태그는 모두 컴포넌트로 만들어야함.
  • CSS를 수정할 때 마다, 해당 컴포넌트를 각각 들어가서 수정해야함.

4. React Virtualized

Image

ReactJS 공식 문서에서는 성능 최적화 페이지에서 소개되는 두 개의 라이브러리 중 하나이다. 널리 알려진 Windowing 라이브러리 라고 소개된다.

주어진 시간에 목록의 부분 목록만 렌더링하며 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있어 성능 향상에 도움되는 것이다. 주로 Infinity Scroll 페이지를 최적화 시킬 때 사용되는 것 같다.

Image

5. Grommet

Image

ReactJS 프로젝트에서 사용되는 어플리케이션 전용 UI 라이브러리이다. 반응형 및 엑세스 가능한 모바일 우선 코드 구성요소를 자랑하는 라이브러리이다.

장점

  • 다양한 컴포넌트 라이브러리를 보유하고 있으며, 넷플릭스 및 Boeing 등이 이용한다.
  • 반응형 레이아웃 디자인이 가능하며, 접근성 이슈도 해결되었다.
  • 테마 도구, 색상, 유형 및 레이아웃을 사용자 정의 커스터마이징하는데 도움이 된다.
  • 차트 컴포넌트가 기본으로 제공 된다.
  • Sketch 파일도 제공한다.


6. Material-UI

Image

ReactJS안에서 사용할수 있는 대표적인 디자인 UI 라이브러리이다.

장점

  • 가장 유명하며, 많이 쓰이므로 예제 및 자료들이 많다.
  • 공식문서의 모든 컴포넌트의 예제 코드를 제공한다.

단점

  • 커스터마이징의 어려움
  • DOM 노드의 증가


7. Chakra UI

Image

ReactJS안에서 사용할수 있는 디자인 UI 라이브러리이다.

장점

  • 디자인이 정말 깔끔하고 모던하게 예쁘다.
  • Import를 통합하여 보여줌.

단점

  • 자료가 부족하여, 직접 구현해야된다는 점.
  • 컴포넌트의 쓰이는 이벤트 핸들러의 종류가 부족하며, 변경할수 있는 props가 적다.
  • 공식문서의 자료가 부족함.


8. Ant Design UI

Image

ReactJS안에서 사용할수 있는 디자인 UI 라이브러리이다. 관리자 페이지를 만들기에 가장 적합하며, 중국 국가에서 주로 사용된다.

장점

  • 웹,앱 모두 지원가능한 깔끔한 디자인 제공
  • 다른 라이브러리에서 쉽게 볼 수 없는 컴포넌트들을 제공

단점

  • 개발사의 국가영향에 언어의 장벽이 걸림돌, 기본언어가 중국어.
  • 한국에서 쓰이기에 부적합하다, 정보가 굉장히 적음.


9. React Router

Image

라우팅이란, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 가장 많이 쓰이는 라이브러리가 React Router 이다.

종류

  • BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지
  • HashRouter : 해시 주소를 감지

사용되는 컴포넌트

<BrowserRouter>, <HashRouter>
: 라우터 역할을 담당, 새로고침을 하지 않더라도 새로운 컴포넌트를 렌더링 해줌.

<Routes>,<Route>
: 경로 매칭을 해줌, Route에서 어떤 컴포넌트를 렌더링할지 결정함.

<Link>
: 경로를 변경 해줌, 기존 HTML의 A태그와 비슷하며, 페이지 전환 방지 기능을 내장하고 있음.


10. React Axios

Image

ReactJS에서 AJAX를 구현하려면, Javascript의 내장객체인 XMLRequest를 사용하거나, HTTP Client를 사용해야 한다. axios는 ReactJS에서 가장 많이 쓰이는 HTTP Client 라이브러리의 하나다. axios는 Promise 기반이고, async/await 코드를 쉽게 구현할 수 있다.

특징

  • 오래된 브라우저에서도 지원
  • 요청을 중단할 수 있다.
  • Response TimeOut을 쉽게 지정 가능.
  • CSRF 보호 기능이 내장.
  • Promise(ES6) API를 사용.
  • HTTP 요청 취소 혹은 요청과 응답을 JSON 형태로 자동 변경


11. React Hook Form

Image

ReactJS에서 From의 Validation을 도와주는 라이브러리이다. 기본적으로 uncontrolled component를 베이스로 하지만 controlled component에 대한 지원도 하고 있다. React Hook Form의 장점은 가볍고, 다른 디펜던시가 없으며, Ref를 기반으로 하여 다른 UI 라이브러리와 호환이 잘된다.

© 2024. DAINO all rights reserved.