Styled Components / Css-in-JS

 

 

Css-in-JS 란 ?

  [ 자바스크립트로 CSS 코드를 작성하는 방식 ]

 

 

1 ) vs code 터미널에 yarn add styled-compornents 입력

 

 

2 ) js 파일에 styled-components import 해주기

 

 

 * styled.뒤에( div 부분 )은 html 요소가 오면 된다.

 

 

---

 

 

  1 ) StBox안에 p 태그를 추가　　　　　　　　　　　　　　　　　　　　

 

👇

 

  2 )  const 로 p 태그에 css 속성을 만들어준다.

 

 

3 )  <p>태그로 깜쌌던 부분을 <StP>로 바꿔준다.

 

 

 

👇

결과 ) StP에 CSS 준 부분이 제대로 반영됨.

 

 

 

 

 

 

---

 

하드코딩 했던 것들을  map 함수를 사용해서 바꿔보자.

function App() {

  return(

   <StContainer>

    <StBox borderColor="red" backgroundColor="teal"> 빨간 박스 </StBox>

    <StBox borderColor="blue"> 파란 박스 </StBox>

    <StBox borderColor="green"> 초록  박스 </StBox>

   </StContainer>

  );  

}

👇

 

// props : 부모 컴포넌트 -> 자식 컴포넌트

// Box 에게 props를 통해서 조건부 스타일링이 가능 !

 

// 박스의 색 const boxList = ['red', 'blue', 'green', 'b']; // 색을 넣으면 이름을 반환 const getBoxName = (color) =>{   switch (color) {     case 'red':       return "빨간 박스";     case 'green':       return "초록박스";     case 'blue':       return "파랑박스";     default:       return "검정박스";   } }

 

 

function App() {   return(    <StContainer>     {/* <StBox borderColor="red" backgroundColor="teal"> 빨 박스 </StBox> */}     {       boxList.map((box)=>{         return <StBox borderColor={box}>{getBoxName(box)}</StBox>       })     }    </StContainer>   );   }

map 함수 를 써서 box 하나하나 돌려주기