[React] styled component를 이용한 조건부 스타일링

선행지식 : props, props children

 

// 자식 컴포넌트(StBox) : 전달된 props를 받음
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 부모 컴포넌트에서 보낸 props를 받아 사용 
  margin: 20px;
`;


// 부모 컴포넌트(APP) : props를 통해 borderColor라는 값을 전달 
const App = () => {
  return (
    <div>
			
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

 

=> 함수의 인자에서 props를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있습니다. 그것을 return 합니다. ${(props)⇒{ return props.borderColor }} 이렇게 리턴하면 (props)⇒{ return props.borderColor } 의 값이 === 'red' 가 되고 결국 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것 입니다. 

 

본격적으로, styled component를 이용한 조건부 스타일링

-props를 이용해서 

⬇️

 

-switch, map을 이용해서 리팩토링

⬇️

 

 

+styled component 오류 추가

-<div>태그 속 form태그가 있는 구조이고, 스타일컴포넌트를 먹이려 하니 기본 기능이 안되더라. 근데 상위에 <div>요소를 추가해주니 잘됨..ㅋㅋ