[ReactJS] Style Components

 css 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 한다.
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다.

 

css를 적용하기 위한 3가지 방법
- 태그에 직접 속성 style={}
- 적용 속성 모듈화 파일 생성 (Button.module.css)
- Style Component

 

 

---

1. 라이브러리 설치

npm i styled-components

/* TypeScript의 경우 추가 */
npm i @types/styled-components

 

 

 

---

2. 사용방법

import styled from "styled-components";


const Box = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;


function App() {
  return (
      <Box />
  );
}

export default App;

• back tick(``) 문자 안에 css 적용
• 스타일링 된 컴포넌트 사용 가능
• 알아보기 쉬운 이름으로 변경 가능 ex) Box, Title
• css를 반복할 필요가 없이 재사용 가능

 

 

---

3.  Style 컴포넌트에 props 전달 

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Box bgColor="tomato" />
    </Father>
  );
}

export default App;

• props 전달 방법을 그대로 사용 가능하다.

 

2-1) React TypeScript Prop

const Tab = styled.span<{ isActive: boolean }>`
  color: ${(props) =>
    props.isActive ? 'red' : 'gray'};

`;


<Tab isActive={true}>

• TypeScript는 타입을 정의해 줘야 한다.

 

 

 

---

4. 컴포넌트 확장(extend)

컴포넌트의 모든 요소를 유지하면서 새로운 코드를 추가

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

/* Box style를 그대로 가져와 추가 */
const Circle = styled(Box)`
  border-radius:50px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Box bgColor="tomato" />
    </Father>
  );
}

export default App;

• 기존 컴포넌트의 모든 속성을 들고 와 새로운 속성까지 추가한다. props도 가져옴

 

 

 

 

---

5. element(태그) 변경

컴포넌트이 모든 요소를 같게 하고 싶지만, 태그만 변경하고 싶을 때

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
      <Box as="a" href="/" />
  );
}

export default App;

• as=”a” : as라는 props로 a태그를 보내게 되면 Box는 a태그로 변경된다.

 

 

 

---

6. HTML attribute(속성) 설정.

태그의 속성이 반복되는 컴포넌트를 만들 수 있다 이럴경우 .attrs() 사용해 미리 적용할 수 있다.

import styled from "styled-components";

const Input = styled.input.attrs({ required: true, minLength:10 })`
	background-color: tomato;
`;
function App() {
  return (
      <Input /> 
			<Input />
  );
}

export default App;

• attrs({}) : 모든 속성을 가진 오브젝트를 담을 수 있다.

 

 

 

---

7. 애니메이션 효과 적용

import styled, { keyframes } from "styled-components";


const Wrapper = styled.div`
  display: flex;
`;

/* 애니메이션 */
const rotatioAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    transform:rotate(360deg);
    border-radius:50px;
  }
  100% {
    transform:rotate(0deg);
    border-radius:0px;
  }
`;

/* 컴포넌트에 애니메이션 효과 적용 */
const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotatioAnimation} 1s linear infinite;
`;

function App() {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
}

export default App;

• keyframes 를 import 받는다.

 

7-1)  애니메이션을 다른 화면에 사용

export const rotatioAnimation = keyframes`
  from {
    transform:rotate(0deg);
    border-radius:0px;
  }
  to {
    transform:rotate(360deg);
    border-radius:50px;
  }
`;

• export를 해주면 다른 곳에서 import 받아 사용할 수 있다.

 

 

 

---

8. Style 컴포넌트 내부 태그 속성 주기

import styled from "styled-components";

const Box = styled.div`
  height: 200px;
  width: 200px;
  span {
    font-size: 36px;
		&:hover {
      font-size: 40px;
    }
  }
`;
function App() {
  return (
      <Box>
        <span>😆</span>
      </Box>
  );
}

export default App;

• Box 컴포넌트의 내부 태그 타켓 가능
• & : 태그를 선택하는것과 같은 의미

 

 

 

---

9. Pseudo Selector 

import styled from "styled-components";

const Emoji = styled.p`
  font-size: 30px;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  ${Emoji} {
    &:hover {
      font-size: 40px;
    }
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>😆</Emoji>
      </Box>
    </Wrapper>
  );
}

export default App;

• Box 컴포넌트 안에 Emoji라는 컴포넌트를 줌으로써 Emoji가 어떤 태그이던 타깃 하여 css가 적용되게 만들 수 있다.