[React] Custom Component 2

Styled Components 란 ?

CSS in JS 개념(컴포넌트 단위에 캡슐화)이 대두되면서 나온 라이브러리이다.

CSS in JS 를 사용하면 CSS도 Js 안에 넣어줄 수 있기 때문에  HTML , JS , CSS를 묶어서 하나의 JS파일안에 컴포넌트 단위로 개발할수 있게 된다! (개쩌러) CSS in JS 중에서도 다른 라이브러리도 있지만 가장 인기있다고 하는 Styled Components의 사용법에 대해 알아보자.

 

Styled Components  사용법! 

npm install --save styled-components

로 설치를 해준다.  그리고 Styled Componets는 package.json에

{
  "resolutions": {
    "styled-components": "^5"
  }
}

이 코드를 추가하는것이 좋은데 왜냐면 여러 버전의 Styled Componets가 설치되어 발생하는 문제를 줄여주기 때문이다! 

마지막으로 

import styled from "styled-components"

사용할 파일을 불러와주면 준비는 끝이다! 

 

Styled Components  문법! 

컴포넌트 만들기

Styled Components 로 컴포넌트를 만드는 방법은 ES6의 Templete Literals 문법을 사용한다. 따옴표(" ")말고 백틱(``)를 사용해야 한다. 

컴포넌트 선언 후 styled.태그종류 할당하고 `안에 기존에 CSS작성하던 문법과 같이 스타일 속성을 작성해주고 만든 컴포넌트를 React 컴포넌트를 사용하듯이 리턴문 안에 작성해주면 렌더된다! (말로는 아주 쉽다)

 

import styled from "styled-components";

const RadiusButton = styled.button` 
// Styled Components로 컴포넌트를 만듬 
// styled는 원하는 스타일을 적용하기 위해서 사용됨
  border-radius: 10px; 
`;
// 컴포넌트 사용하듯이 
export default function App() { 
// export(내보내기) default 는 해당 모듈엔 개체가 하나만 있다는 말 
	return <RadiusButton>RadiusButton</RadiusButton>;
    }

컴포넌트 재활용 하기

컴포넌트 재활용 하기위해 컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해주고 추가하고 싶은 스타일 속성을 작성해주면 된다! 

import styled from "styled-components";

const RadiusButton = styled.button` 
  border-radius: 10px; 
`;

  const BigRadiusButton = styled(RadiusButton)`
  padding: 10px;
  margin-top: 10px;
`; // 이렇게 재활용 가능 

const BigBlueRadiusButton = styled(BigRadiusButton)`
  background-color: blue;
`; // 재활용의 재활용 

export default function App() {
  return (
    <>
      <RadiusButton>Blue Button</RadiusButton>
      <br />
      <BigRadiusButton>Big Blue Button</BigRadiusButton>
      <br />
      <BigBlueRadiusButton>Big Red Button</BigBlueRadiusButton>
    </>
  );
}

Props 활용하기 

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.
내려준 props값에 따라 컴포넌트 랜더링도 가능하다.
Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다.
props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 됩니다.

1) Props로 조건부 렌더링하기

삼항연산자로 조건부 렌더링할 수 있다. 

const Button = styled.button`
background: ${(props) => props.blue ? "blue" : "red"}`;

2) Props 값으로 렌더링하기

props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다. 

const Button = styled.button`
background: ${(props) => props.color ? props.color : "red"}`;

<Button>Button</Button> // 버튼색 === red
<Button color="blue">ButtonA</Button> //버튼색 === blue
<Button color="pink">ButtonB</Button> //버튼색 === pink

여기서는 props.color가 없다면을 조건으로 쓰고있다.

꼭 삼향연산자가 아니라도 Js코드라면 무엇이든 사용할 수 있으니 원하는 값을 사용할 수 있게 만들면 된다.  ( && || 이런것도 가능)

 

전역 스타일 설정하기

전역 스타일 설정 방법은 먼저 Styled Components에서  createGlobalStyle 함수를 불러오면 된다.

그 다음에는 불러온 함수를 사용해 CSS 파일 적성하듯 설정하고 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용하면

전역에 컴포넌트 스타일이 적용된다. 

import { createGlobalStyle } from "styled-components";
// createGlobalStyle 불러오기 

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	} // 스타일 설정

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
} // 최상위 컴포넌트에서 사용