styled-components - 2 ( 조건부 스타일링 ), CSS Reset

이대영·2024년 10월 1일

조건부 스타일링

스타일css 뼈대가 같은 요소 3가지에 각각 이름에 맞는 color값을 줘보기 => 조건부 사용

const App = () => {
  return (
    <>
      <StyledBox>RedBox</StyledBox>
      <StyledBox>BlueBox</StyledBox>
      <StyledBox>GreenBox</StyledBox>
    </>
  );
};

border값의 color 속성을 각각 바꿔줄 것 이기에 함수 사용을 위한 ${ } 안에 props 전달

const StyledBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
`;

각 요소에 설정 값 지정

const App = () => {
  return (
    <>
      <StyledBox borderColor="red">RedBox</StyledBox>
      <StyledBox borderColor="blue">BlueBox</StyledBox>
      <StyledBox borderColor="green">GreenBox</StyledBox>
    </>
  );
};

같은 코드가 반복되고있다 => 리팩토링 필요 (switch문, map메서드)를 이용하기

switch문

const BoxList = ["red", "blue", "green"];

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "RedBox";
    case "blue":
      return "BlueBox";
    case "green":
      return "GreenBox";
    default:
      return "BlackBox";
  }
};

map

const App = () => {
  return (
    <>
      {BoxList.map((boxColor) => {
        return (
          <StyledBox key={boxColor} borderColor={boxColor}>
            {getBoxName(boxColor)}
          </StyledBox>
        );
      })}
    </>
  );
};

결과

CSS Reset

브라우저마다 기본으로 제공하는 스타일을 초기화하고 기본값을 주기 위해 하는 설정

CSS Reset은 cross browsing을 위해 필요한 작업들 중 하나

cross browsing: 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다.
검색 등으로 Reset으로 자주 사용하는 속성들을 복사하여 사용하기
보통 reset.css 파일을 따로 작성하여, import