20230209 [react] - styled components

lionloopy·2023년 2월 9일
0

리액트

목록 보기
6/18

Styled Components

:css-in-js: 자바스크립트 코드로 css를 만들어내는 방식이다.
꾸미고자 하는 스타일일을 styled component로 만들고,
안에 스타일을 작성하는 방식으로 만든다.
장점: props를 활용하여 조건부 스타일링을 할 수 있다.
css에서 사용할 수 없었던 if, switch, 삼항연산자 등을 사용할 수 있다.

기본코드

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid black;
`;

function App() {
  return <StBox>박스</StBox>;
}

함수 밖에서 const로 변수명을 선언하고, 그 변수안에 styled를 적은 뒤
. 뒤에는 html형식이 온다. html형식 뒤에는 문자열을 넣을거기 때문에 백틱이 와야하고, 그 문자열은 css 형식 그대로 작성된다.
이렇게 styled component를 다 만들었으면 함수 안 return 값에 태그 대신 만들어진 컴포넌트를 넣는다.

조건부 스타일링

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
  background-color: ${(props) => props.backgroundColor};
`;

function App() {
  return (
    <>
      <StBox borderColor="red" backgroundColor="lightgray">
        박스
      </StBox>
      <StBox borderColor="blue">박스</StBox>
      <StBox borderColor="black">박스</StBox>
    </>
  );
}

박스가 여러개 생기는데, 그 박스들을 조건에 따라 스타일링을 적용하고 싶다면, 각각 className이란 css를 넣지 않고 styled component를 이용할 수 있다.
부모가 자식에게 값을 전달하기 위해 borderColor라는 데이터를 전달하고,
자식인 styled component에 변하는 자바스크립트, 함수 형태로 넣어준다.
${(props) => props.borderColor} props를 받아 그 중에서 borderClor적용

switch

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

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

//박스의 색 모음
const boxList = ["red", "blue", "black", "b"];

//색을 넣으면 이를 반환하도록 동작하는 함수
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "blue":
      return "파란 박스";
    case "black":
      return "검은 박스";
    default:
      return "? 박스";
  }
};

function App() {
  return (
    <>
      <StContainer>
        {boxList.map((box) => {
          return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
        })}
      </StContainer>
    </>
  );
}

Stbox 컴포넌트를 만들고 그 컴포넌트는 return값에 들어가는 자식이다.
따라서 props를 받을 수 있기 때문에 값을 받아와 props를 활용한다.
우리는 똑같은 박스들을 만들거고, 그 박스들의 색만 변하면 되기에
초기 코드처럼 박스를 포함한 태그를 늘려가면 복잡해지기만 한다.
따라서 이때 switch를 활용한다!
먼저 색의 성질이 들어간 boxList 배열을 만든다.
그리고 색을 넣으면 그 색에 따라 결과를 반환해주는 getBoxName함수를 만든다.
그 박스 안에 switch구문을 활용하여 case가 'red'라면 : return '빨간박스'를 반환하도록 한다. 그리고 값이 없다면 default값을 마지막에 넣어준다.
따라서 마지막에 추가한 'b'의 경우 default값에 의해 ?박스로 출력되게 된다.
그리고 return 구문에서 boxList배열에 대한 map을 돌리고,
그 return값으로 StBox컴포넌트를 넣는다. 컴포넌트 값에는 props로 전달한 borderColor를 그대로 넣어주고 그 값을 boxList에서 돌린 item으로 넣어준다.
그리고 구문은 getBoxName함수를 실행시켜 나온 값을 넣도록 하고, 그 파라미터는 itm이다.

GlobalStyle

:전역 스타일링. styled-components는 해당 컴포넌트 내에서만 사용할 수 있지만,
globalstyle은 프로젝트 전체를 아우르는 스타일이다.
기본코드

const GlobalStyle = createGlobalStyle`
body{
    font-family: 'Arial';
    font-weight: 900;
}
`;

body밑으로 다 이 스타일을 적용하겠다는 의미로 백틱 안에 body를 넣어준다.

Sass

:css는 웹 프로젝트 규모가 커질수록 복잡해지고, 유지보수도 불편해진다.
human error를 줄이려는 노력을 위해 생긴 것!
코드의 재사용성을 높이고 가독성을 향상시켜줄 수 있는 방법이다.
특징

  • 스타일엘 들어갈 것들을 변수화 시키고 가져가서 쓸 수 있다.
  • 중첩할 수 있다.(nesting) => &{}
  • import할 수 있다.

CSS reset

:기본적으로 css 스타일을 주지 않아도 태그마다 자동 적용되어 있는 default style을 제거하는 방식이다.
구글에 remove css 이런식으로 검색하면 양식이 나오는데 reset.css 파일을 만들고
index.js에 import하면 자동적으로 적용된 css를 없애준다.

profile
Developer ʕ ·ᴥ·ʔ ʕ·ᴥ· ʔ

0개의 댓글