global style file , css module 사용하기: 파일이름.module.css 과 같은 방식으로 우리는 react에 style을 적용할 수 있습니다.하지만 이런방식 대신 더욱 편리하게 스타일을 적용 할 수 있는데요.😎

Styled Components

오늘 알아볼 Styled components는 javascript 에서 css 를 사용할 수 있도록 도와주는 스타일링 프레임워크입니다. 이를 통해 재사용성을 높이고, js영향을 받는 스타일링을 구현하기 쉽습니다.

사용방법

• styled components에서 import한 styled를 이용합니다.
• styled.를 입력합니다.
• back-tick을 이용하여 back0tick사이에 css를 넣습니다.

import styled from "styled-components";

//모든 style은 컴포넌트를 사용하기에 미리 컴포넌트에 포함된다
const Father = styled.div`
  display: flex;
`; //back-tick을 이용하여 style요소를 정해줄 수 있다. bacj-tick 내부에 css 코드를 써내려 갈 수 있다.

const BoxOne = styled.div`
  background-color : teal;
  width : 100px;
  height: 100px;
`;

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

function App() {
  return (
  <Father>
    <BoxOne />
    <BoxTwo />
  </Father>
  );
}

export default App;

기존 별도의 css 파일을 import하는 방식과 달리 styled-component는 style을 사용하기 전 모두 component에 미리 포함되기에 코드사용량이 줄어들고, key value의 형태가 아닌 css 문법을 사용하여, 가독성이 높습니다.

이제 우리는 컴포넌트를 두 부분으로 나눌 수 있습니다. 첫째로 style, 두번째로 구현 부분 입니다.

이처럼 component를 빌드하면 임의의 클래스 명이 생성되는 것을 볼 수 있습니다. 중복되지 않는 class 명을 생성하기에 , css 스타일링의 혼선사고를 방지 할 수 있습니다.

앞서 중복되는 코드들이 많은 것을 확인 할 수 있습니다. 이에 component를 확장하여 중복되는 것을 수정 할 수 있습니다.

const Box = styled.div`
  background-color : ${(props)=>props.bgColor}; 
  width : 100px;
  height: 100px;
`; //porps라는 파라미터를 받는 함수를 사용한다.

const Circle = styled(Box)`
  border-radius : 50px;
`; // Box와 border-radius값만 달라서 box component를 확장한다. 확장하려고자 하는 component이름을 styled()안에 적어준다.

const Text = styled.h1`
  color : black;
`;

function App() {
  return (
  <Father>
    <Box bgColor="teal" />
      <Text>Hello</Text>
    <Circle bgColor="tomato" /> {/* prop을 보내서 원하는 속성을 고르게끔 한다 -> component에 data를 보냄 */}
  </Father>
  );
}

해당 코드를 통해서 우리는 두가지를 확인 할 수 있습니다.

• props를 통해 component를 설정 할 수 있습니다. prop의 이름을 전달해서 함수 내에서 해당 prop의 이름을 받으면 됩니다.
• component를 확장 할 수 있습니다. -> 기존 컴포넌트의 모든 속성을 들고 와서 ,전부 가지고 새로운 속성가지 더해 줄 수 있습니다.

component의 태그는 바꾸되, 스타일은 같게 사용할때

const Father = styled.div`
  display: flex;
`; //back-tick을 이용하여 style요소를 정해줄 수 있다. back-tick 내부에 css 코드를 써내려 갈 수 있다.

const Btn = styled.button`
  color: white;
  background-color: red;
  border: 0;
  border-radius: 15px;
 `;

//component의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을때, button이 아니라 a href 같은게 필요하다면?

function App() {
  return (
  <Father>
    <Btn>Log in</Btn>
  </Father>
  );
}

예상한대로 html의 button태그를 사용하는 것을 볼 수 있습니다.

우리는 prop에 as를 통해 이를 해결할 수 있습니다.
이 prop은 button styled component인 Btn을 사용할 건데 HTML 부분을 바꿔서 a를 전달할 것 입니다.

<Btn as="a">Log in</Btn>

다음과 같이 같은 component를 사용하는데 하나는 button 하나는 a 태그를 사용하는 것을 확인 할 수 있습니다.

다양한 component에 속성을 추가하고 싶을때

function App() {
  return (
  <Father>
    <Input />
    <Input />
    <Input />
    <Input />
    <Input />
  </Father>
  );
} 

5가지의 input에 required 속성을 추가하고 싶을때 5가지 input모두를 수정하는 것은 굉장히 번거로운 일입니다.이를 모두 수정해야할까요?
우리는 대신에 styled components를 이용한 트릭을 사용할 수 있습니다.
styled.input.attrs({})을 사용합니다.
attribute안에 후 input으로 전달될 모든 속성을 가진 오브젝트를 담을 수 있다.

const Input = styled.input.attrs({ required: true, minLength:10 })`
  background-color: tomato;
 `;

이처럼 attrs 를 통해 모든 input component에 required 속성을 추가할 수 있습니다.