React 전문가들이 추천하는 15가지 라이브러리

리액트 추천 라이브러리 15

리액트 소개

현대 웹 개발 세계에서 리액트(React)는 강력하고 다재다능한 사용자 인터페이스 라이브러리로 두드러집니다. 메타(구 페이스북)에서 개발한 리액트는 개발자들 사이에서 큰 인기를 얻었으며 다양한 애플리케이션에서 널리 사용되고 있습니다.

리액트란 무엇인가?

리액트는 동적이고 상호작용적인 사용자 인터페이스를 구축하는 과정을 단순화하는 무료 오픈 소스 프론트엔드 자바스크립트 라이브러리입니다. 컴포넌트 기반 아키텍처를 채택하여, 재사용 가능한 UI 컴포넌트를 만들어 복잡한 애플리케이션을 구성할 수 있습니다.

리액트의 실제 사용 사례

리액트는 다음과 같은 인기 웹사이트와 웹 애플리케이션 개발에 널리 사용됩니다:

• 페이스북
• 인스타그램
• 넷플릭스
• 에어비앤비
• 트위터
• 왓츠앱 웹
• 핀터레스트
• 트위치

리액트 라이브러리 탐구

라이브러리란 무엇인가?

코딩에서 라이브러리는 개발자가 프로그래밍 작업을 단순화하고 가속화하기 위해 활용할 수 있는 사전 작성된 코드 모음을 말합니다. 이러한 라이브러리는 재사용 가능한 기능을 제공하여 개발 시간과 노력을 줄여줍니다.

리액트 개발을 위한 필수 라이브러리

1. Axios

npm i axios

Axios는 브라우저와 Node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. 작고 확장 가능한 인터페이스를 제공하는 간단한 라이브러리입니다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Fetch 대신 Axios를 사용하여 코드 라인을 줄이고 API 호출을 할 수 있습니다.

 

2. Formik

Formik은 리액트 애플리케이션에서 폼 데이터를 빌드하고 처리하는 무료 오픈 소스 라이브러리입니다. 간단한 API와 내장된 유효성 검사를 제공하여 입력 데이터를 쉽게 수집하고 조작할 수 있습니다. Airbnb, Walmart, Lyft, Stripe와 같은 회사에서 사용하고 있습니다.

npm i formik

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
};

const onSubmit = (values) => {
  console.log(values);
};

const validate = (values) => {
  const errors = {};

  if (!values.firstName) {
    errors.firstName = 'Required';
  }

  if (!values.lastName) {
    errors.lastName = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^\S+@\S+\.\S+$/.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  return errors;
};

const SampleForm = () => {
  return (
    <div>
      <h1>Sample Form</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validate={validate}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="firstName">First Name:</label>
              <Field type="text" id="firstName" name="firstName" />
              <ErrorMessage name="firstName" component="div" />
            </div>

            <div>
              <label htmlFor="lastName">Last Name:</label>
              <Field type="text" id="lastName" name="lastName" />
              <ErrorMessage name="lastName" component="div" />
            </div>

            <div>
              <label htmlFor="email">Email:</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>

            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default SampleForm;

Formik은 리액트 애플리케이션에서 폼 상태와 유효성 검사를 관리하는 직관적인 API를 제공하여 폼 유효성 검사를 단순화합니다.

 

3. React Helmet

React Helmet은 문서의 제목, 설명, 메타 태그 등을 동적으로 설정하는 데 사용됩니다. SEO를 위해 메타 태그를 업데이트해야 할 때 매우 유용합니다. React Helmet은 title, style, base, meta, link, script, NoScript 등 모든 유효한 head 태그를 지원합니다.

npm i react-helmet

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

React Helmet은 검색 엔진이 페이지를 색인하고 순위를 매길 때 사용하는 메타 태그를 쉽게 설정하고 업데이트할 수 있어 웹사이트의 SEO를 향상시킬 수 있습니다. 또한 소셜 미디어 플랫폼에서 콘텐츠를 공유할 때 사용하는 메타 태그를 설정하고 업데이트하는 데 도움을 줄 수 있습니다.

 

4. React-Redux

Redux는 예측 가능하고 유지 관리 가능한 전역 상태 관리를 위한 자바스크립트 라이브러리입니다.

npm i react-redux

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// 초기 상태 정의
const initialState = {
  count: 0
};

// 리듀서 함수 정의
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

// Redux 스토어 생성
const store = createStore(reducer);

// 액션 생성자 정의
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// 카운터 컴포넌트
const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// Redux 스토어에 카운터 컴포넌트 연결
const ConnectedCounter = connect(
  state => ({ count: state.count }),
  { increment, decrement }
)(Counter);

// App 컴포넌트
const App = () => {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
};

export default App;

애플리케이션의 전체 전역 상태는 단일 스토어 내부의 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 발생한 일을 설명하는 객체인 액션을 생성하여 스토어에 디스패치하는 것입니다. 액션에 대한 응답으로 상태가 업데이트되는 방법을 지정하려면 이전 상태와 액션을 기반으로 새 상태를 계산하는 순수 리듀서 함수를 작성해야 합니다.

 

5. React Router DOM

npm i react-router-dom

React Router Dom은 리액트로 빌드된 웹 애플리케이션에서 라우팅과 내비게이션을 관리하는 데 일반적으로 사용됩니다. API를 제공하여 라우트를 정의하고 탐색하며 렌더링하는 과정을 단순화합니다.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },


]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

리액트 라우터의 주요 장점은 다른 페이지로 링크를 클릭할 때 페이지가 새로고침되지 않아도 된다는 점입니다.

 

6. Dotenv

npm install dotenv --save

Dotenv는 .env 파일에서 환경 변수를 process.env로 로드하는 종속성이 없는 모듈입니다. 코드베이스와 별도로 환경에 구성 요소를 저장하여 비밀번호와 비밀 키와 같은 기밀 정보를 보호합니다.

import React, { useEffect, useState } from 'react';
require('dotenv').config();

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(process.env.REACT_APP_API_URL)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default App;

 

7. ESLint

npm i eslint

ESLint는 인기 있는 오픈 소스 자바스크립트 린팅 유틸리티입니다. 잠재적인 오류를 분석하고 코딩 표준을 강제하며 코드 품질을 향상시킵니다. ESLint는 개발자가 일반적인 실수를 식별하고 수정하며 모범 사례를 사용하고 코드베이스 전체에서 일관성을 유지하는 데 도움이 됩니다.

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];
import React from 'react';
import Header from './components/Header';
const App = () => {
    return (
        <div>
            <Header />
        </div>
    );
};
export default App;

위 예제에서, ESLint를 실행하면 몇 가지 오류가 발생합니다.

1:8  warning  'React' is defined but never used   no-unused-vars
2:8  warning  'Header' is defined but never used  no-unused-vars

 

8. date-fns

npm i date-fns

date-fns는 브라우저와 Node.js에서 자바스크립트 날짜를 조작하기 위한 가장 포괄적이고 간단하고 일관된 도구 세트를 제공합니다.

// 날짜 문자열 파싱
const date = dateFns.parse('2023-08-04');

// 날짜 포맷
const formattedDate = dateFns.format(date, 'MM/dd/yyyy');

// 두 날짜 비교
const areDatesEqual = dateFns.isEqual(date1, date2);

// 두 날짜 사이의 차이 계산
const differenceInDays = dateFns.differenceInDays(date1, date2);

date-fns는 자바스크립트에서 날짜와 시간을 처리하기 위한 강력하고 다재다능한 라이브러리로 모든 규모의 프로젝트에 적합한 선택입니다.

 

9. react-error-boundaries

npm install react-error-boundary

에러 바운더리는 자식 컴포넌트 트리 어디에서든 자바스크립트 오류를 캐치하고 해당 오류를 로깅하며 충돌한 컴포넌트 트리 대신 폴백 UI를 표시하는 리액트 컴포넌트입니다.

"use client";

import { ErrorBoundary } from "react-error-boundary";

function fallbackRender({ error, resetErrorBoundary }) {
  // resetErrorBoundary()를 호출하여 에러 바운더리를 재설정하고 렌더링을 다시 시도합니다.
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

<ErrorBoundary
  fallbackRender={fallbackRender}
  onReset={(details) => {
    // 에러가 다시 발생하지 않도록 앱 상태를 재설정합니다.
  }}
>
  <ExampleApplication />
</ErrorBoundary>;

ErrorBoundary 컴포넌트를 다른 리액트 컴포넌트 주위에 감싸서 오류를 "캐치"하고 폴백 UI를 렌더링합니다. 폴백 UI는 로딩이 완료되지 않았을 때 실제 UI 대신 렌더링되는 임시 UI입니다.

 

10. sweetalert

npm install sweetalert --save

SweetAlert는 웹 애플리케이션을 위한 대체 알림 및 모달 대화 상자를 제공하는 자바스크립트 라이브러리입니다. 내장된 알림 기능을 대체하고 기본 브라우저 대화 상자의 사용자 인터페이스를 개선할 수 있습니다.

import React from 'react';
import Swal from 'sweetalert';

const SweetAlertExample = () => {
  const handleClick = () => {
    Swal.fire({
      title: 'Hello!',
      text: 'This is a SweetAlert dialog.',
      icon: 'success',
      confirmButtonText: 'OK'
    });
  };

  return (
    <div>
      <h1>SweetAlert Example</h1>
      <button onClick={handleClick}>Show SweetAlert</button>
    </div>
  );
};

export default SweetAlertExample;

 

11. styled-components

npm i styled-components

Styled-components는 리액트와 리액트 네이티브 개발자가 UI 컴포넌트와 스타일을 한 파일 위치에 정의할 수 있도록 하는 오픈 소스 라이브러리입니다. 자바스크립트(JSS)로 CSS를 사용하여 개발자가 자바스크립트 파일에서 직접 CSS 코드를 작성할 수 있습니다.

import React from 'react';
import styled from 'styled-components';

// <Title> 리액트 컴포넌트를 생성하여 <h1>을 렌더링하며,
// 중앙에 정렬되고, 연한 보라색이며, 1.5em 크기로 설정됩니다.
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// <Wrapper> 리액트 컴포넌트를 생성하여 <section>을 렌더링하며,
// 일부 패딩과 파파야 휩 배경을 갖습니다.
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function MyUI() {
  return (
    // 다른 리액트 컴포넌트처럼 사용하면 됩니다. 단, 스타일이 적용됩니다!
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

 

12. react-tooltip

npm install react-tooltip

react-tooltip 패키지는 앵커 요소에 바인딩하고 요소별 정보를 표시하는 컴포넌트를 제공합니다.

import React from 'react';
import ReactTooltip from 'react-tooltip';

const TooltipExample = () => {
  return (
    <div>
      <h1>React Tooltip Example</h1>
      <button data-tip="Hello, I am a tooltip!" data-for="tooltip">Hover me</button>
      <ReactTooltip id="tooltip" place="bottom" effect="solid" />
    </div>
  );
};

export default TooltipExample;

 

13. React Spinner

npm install --save react-spinners

react-spinner-loader는 데이터가 뷰에 로드되기 전에 비동기 대기 작업을 위해 간단한 리액트 SVG 스피너 컴포넌트를 제공합니다.

import React from 'react';
import { css } from '@emotion/react';
import { RingLoader } from 'react-spinners';

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

const SpinnerExample = () => {
  return (
    <div className="sweet-loading">
      <RingLoader color={'#123abc'} css={override} size={150} loading={true} />
    </div>
  );
};

export default SpinnerExample;

 

14. Yup

npm i yup

Yup은 런타임 값 파싱 및 유효성 검사를 위한 스키마 빌더입니다. 스키마를 정의하고, 값을 일치하도록 변환하고, 기존 값의 형상을 주장하거나 둘 다 할 수 있습니다. Yup 스키마는 매우 표현력이 뛰어나고 복잡하고 상호 의존적인 유효성 검사나 값 변환을 모델링할 수 있습니다.

import * as yup from 'yup';

const personSchema = yup.object({
  firstName: yup.string().defined(),
  nickName: yup.string().default('').nullable(),
  sex: yup
    .mixed()
    .oneOf(['male', 'female', 'other'] as const)
    .defined(),
  email: yup.string().nullable().email(),
  birthDate: yup.date().nullable().min(new Date(1900, 0, 1)),
});

 

15. @testing-library/jest-dom

npm install --save-dev @testing-library/jest-dom

@testing-library/jest-dom은 DOM의 상태를 테스트하기 위한 커스텀 매처를 제공하는 라이브러리입니다. DOM 요소, 속성 및 콘텐츠에 대한 어설션을 가능하게 하는 Jest 테스트 프레임워크의 확장입니다.

```javascript
<button data-testid="button" type="submit" disabled>submit</button>
<fieldset disabled><input type="text" data-testid="input" /></fieldset>
<a href="..." disabled>link</a>
expect(getByTestId('button')).toBeDisabled()
expect(getByTestId('input')).toBeDisabled()
expect(getByText('link')).not.toBeDisabled()

 

결론

이러한 라이브러리를 활용함으로써 개발자는 리액트 애플리케이션의 기능, 성능 및 사용자 경험을 향상시키는 동시에 개발 시간과 노력을 줄일 수 있습니다.

 

전체적으로, 이 포괄적인 개요는 리액트 개발을 위한 도구 및 라이브러리 생태계에 대한 귀중한 통찰력을 제공하며, 개발자가 견고하고 기능이 풍부한 애플리케이션을 효과적으로 구축할 수 있도록 도와줍니다.

 

읽어주셔서 감사합니다! 😊
개발 관련 궁금증이나 고민이 있으신가요?
아래 링크를 통해 저에게 바로 문의해 주세요! 쉽고 빠르게 도움 드리겠습니다.

'개발자서동우' 프로필 보기

 

개발에 도움이 되는 사이트를 소개합니다 :
사이트 바로가기

devloo.io