1. styled component 확장이 아닌 조건에 따른 적용

• 함수형 컴포넌트의 스타일을 중복 사용하고 싶을 때
  • 약간의 코드 변경이 필요할 때
• 기존 사용법
  • 사용하고 싶은 컴포넌트의 className을 복사해 붙여넣어 적용
• 다른 사용법

  • 사용하고 싶은 컴포넌트 스타일에 함수를 넣어서 조건에 따라 적용할 수 있도록 함

  • 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css 를 사용해야합니다.

  • 기존의 컴포넌트를 사용하고 프로퍼티만 지정해주면 됨

    • ⇒ 쓸 때 없는 컴포넌트 생성을 없앰

    //예시
    import styled, **{ css }** from 'styled-components';
    
    const Circle = styled.div`
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
    	// 허그라는 프롭스가 있을 시 아래 적용
      ${props =>
        props.huge &&
        css`
          width: 10rem;
          height: 10rem;
        `}
    `;
    

2. JSX 주석 사용법

2022-10-06 리액트 (벨로퍼트 - 리액트 장점, 단점, JSX)

let content = (
  <div>
      {/* 자바스크립트의 주석과 같다 */}
  </div>
)

3. 드롭다운 구현

https://velog.io/@seondal/React-useState-이용하여-JS로-hover-구현하기

• styled-component로 구현 ⇒ 다른 컴포넌트에게 영향을 끼치게 만드는게 안되어서 속상했다
• useState 를 이용한 hover 기능 구현
  • onMouseOver (마우스가 컴포넌트에 있을 때 onMouseOut ( 마우스가 컴포넌트에 없을 때

4. Styled로 생성한 컴포넌트의 선언 위치

• styled-components 선언은 Component 함수 스코프 외부에 위치 해야하는 규칙을 갖고 있습니다.
• https://dkje.github.io/2020/10/13/StyledComponents/