[React] 리액트 사용 시, 쓸만한 패키지 모음(1)

사이드 프로젝트를 개발하면서 FrontEnd 에 React 를 적용해보고 있는데, 편한 라이브러리들이 많아 몇 가지 정리해본 포스팅입니다.

---

1. styled-component

설치방법

#npm 
npm install styled-components

#yarn
yarn add styled-components

 

공식사이트

https://styled-components.com/

styled-components

 

 

가장 먼저 styled-component 입니다.

styled-component 를 사용하면 아래처럼 css 가 적용된 tag 를 커스텀해서 사용할 수 있습니다.

const StyledWrapper = styled.div`
    margin:0 auto;
    padding: 5px 15px;
`;

export default function MainContent() {
    return(
    	<StyledWrapper>
        // 필요한 내용 추가
        </StyledWrapper>
    );
}

화면에 사용되는 영역들에게 같은 css 를 적용하고 싶을 때, 공통 tag 1개로 사용함으로써 코드 중복을 줄여줄 수 있습니다.

 

2. React-Router-Dom

설치방법

# npm
npm install react-router-dom

# yarn
yarn add react-router-dom

 

공식 사이트

https://v5.reactrouter.com/

Home v6.13.0

 

react 또한 프론트엔드 개발이기에 어쩔 수 없이 화면 전환을 다룰 수 밖에 없는데요.

순수 javascript 를 사용하면 window.location.href 와 같은 방식을 사용해서 단순 화면 전환을 구현하기도 했습니다.

 

react 에서는 이를 react-router-dom 라이브러리를 통해 URI 패턴과 React Component 를 매칭하여 화면 전환을 구현하고,

이는 useNavigate 와 아주 잘 사용 됩니다.

 

3. react-bootstrap

설치방법

# npm
npm install react-bootstrap bootstrap

# yarn
yarn add react-bootstrap bootstrap

 

공식 사이트

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

bootstrap 은 css 가 정의되어 html tag 에 class 를 통해 디자인을 제공하여 개발자로 하여금 일일이 css 를 작성하지 않게 도와주는 패키지입니다.

react-bootstrap 은 react 에 bootstrap 결합한 형태로, bootstrap 을 적용한 component 를 제공해주는 패키지입니다.