✓ Styled-Components의 Extend & Nesting
Styled-Components에서 CSS 속성을 상속받는 법과 HTML 태그를 Nesting하는 법을 배웠다.
✓ Theme을 이용하여 CSS 속성 저장 및 변경
여러 번 사용되는 속성 값들 ( color, border, background 등)을 Theme으로 설정해준 다음, 컴포넌트에서 재사용하는 하는 법을 배웠다.
✓ Shared Component로 코드 재사용
버튼이나 입력 폼 같이 반복적으로 사용되는 같은 컴포넌트를 파일로 분리하여 재사용하여 코드를 효율적으로 작성하는 법을 배웠다.
✓ 중복되는 여러 CSS 속성은 컴포넌트화
모든 CSS 속성들을 무조건 컴포넌트로 만들기보다는 일단 Nesting을 해준 다음 중복되면 따로 컴포넌트로 만드는 것이 좋다.
✓ children이나 props 구조분해 할당을 이용하여 재사용 가능한 컴포넌트 만들기
React 컴포넌트의 children을 이용하면, 자식 컴포넌트에 접근할 수 있다. props를 spread syntax로 내려주면 모든 props를 다른 컴포넌트로 그대로 전달할 수 있다. 이를 이용하여, 재사용 가능한 컴포넌트를 자유롭게 만들 수 있다.
✓ 파일 나누기
중복되는 UI는 어디에 쓰이는 지에 따라 폴더 단위로 분리하여 저장하면 좋다.
✓ Shared Components 로직 복습
✓ Login 부분 블로깅
✓ Sign Up까지 구현 마치기