[React]Styled Component

styled component 사용법

1. styled component 를 import 해준다

   import styled from 'styled-components';

2. 사용하고 싶은 컴포넌트를 만든다

   1. const 뒤에 사용하고 싶은 컴포넌트명을 넣어준다(첫글자는 대문자로 사용)
   2. styled. 뒤에 원하는 element 태그명 작성
   3. 백틱사용해서 그 안에 원하는 style 작성

      const ComponentName = styled.div`
      display: flex;
      justify-content: center;
      align-items: center;
      color: red;
      `

3. 원하는 곳에 지정한 element 사용할때와 같이 사용

   const ComponentName = () => {
     <Div>
       <Img alt="image" src="path" />
     </Div>
   }
   const Div = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
   `
   const Img = styled.img`
     width: 100px;
     height: 100px;
     object-fit: cover;
   `

4. 스타일 컴포넌트에 props 전달해서 사용하기

   1. 속성값 지정하듯이 props 전달
   2. 스타일 컴포넌트 지정한 곳에서 백틱안이니까 달러사인과 중괄호 이용해서 사용
   3. display: ${props => props.ActiveDisplay === true ? "flex" : "none"} 이렇게 사용했지만,
      ${props => props.ActiveDisplay === true ? "display:flex; justify-content: center;" : "display:none;"} 이렇게 여러 조건 한번에 넣는것도 가능

      const ComponentName = () => {
        <Div ActiveDisplay={ActiveDisplay}>
          <Img alt="image" src="path" />
        </Div>
      }
      const Div = styled.div`
        display: ${props => props.ActiveDisplay === true ? "flex" : "none"}
      `
      const Img = styled.img`
        width: 100px;
        height: 100px;
        object-fit: cover;
      `