1. 컴포넌트 export 주의

// 컴포넌트 export 시 함수(컴포넌트)의 이름만 쓴다
// 태그로 감싸는 실수 발생
export defalt App O
export defalt App O

// 또 주의!!
// 함수에서 리턴할 땐 태그로 감싸야 함
//------------------------------------------
App () {
	return App // X
}
//--------------------------------------------
App () { 
	return <App /> // O
}

2. 글꼴 적용 방법

• 구글웹폰트에 사용할 글꼴 검색
• 찾아서 추가하고 복사
• index.html파일에 link태그 추가

3. CSS 선택자 정리 (nth-:nth-child())

• 부분 클래스 적용
• &:nth-child(n + 4) { margin-top: 12px; } ⇒ 4번째부터 적용
• https://lalacode.tistory.com/6

4. styled component 확장

• `const StyledButton2 = styled(StyledButton)```
• 기존 styled로 만든 컴포넌트를 확장할 때 () 묶어서 사용
• 백틱 안에 추가할 코드 작성
• 주의할 점!!
• export 할 때 일반 컴포넌트 처럼 함수에 넣어서 반환하면 안됨! (그냥 변수 그대로 export)

// 올바른 (styled 자체만 export)
import styled from 'styled-components';

const EffectMenuFrame = styled.div`
  width: 65%;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 5px;
`;

export default EffectMenuFrame;

// 틀린 (일반 컴포넌트로 반환 해버림)
import styled from 'styled-components';

const EffectMenuFrame () => {
	const EffectMenuFrame = styled.div`
  width: 65%;
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 5px;
`;
return <EffectMenuFrame />
}

export default EffectMenuFrame;