📌 컴포넌트: UI의 구성 요소

• 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기반
• 웹에서는 HTML을 통해 <h1>, <li>와 같은 태그를 사용하여 rich한 문서를 만듦
  • 이와 같은 '마크업'은 스타일을 위한 CSS와 상호작용을 위한 JavaScript와 결합하여 웹에서 볼 수 있는 모든 UI의 기반이 됨
• React를 사용하면 HTML 마크업, CSS 스타일, JavaScript 상호작용을 재사용 가능한 UI 요소인 커스텀 컴포넌트로 결합 가능
• 컴포넌트는 HTML 태그와 마찬가지로 순서 지정, 중첩하여 전체 페이지를 디자인할 수 있음
• React의 마법: 프로젝트가 성장함에 따라 이미 작성한 컴포넌트를 재사용하여 많은 디자인을 구성할 수 있으므로 개발 속도가 빨라짐

📌 컴포넌트 정의(선언)하기

• 기존에는 웹 페이지를 만들 때 웹 개발자가 콘텐츠를 마크업한 다음에 JavaScript를 뿌려 상호작용을 추가
  • 이는 웹에서만 상호작용이 중요했던 시절에 효과적이었음
• 이제는 많은 사이트와 모든 앱에서 상호작용이 필수
  • 상호작용을 우선시하는 React의 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수

컴포넌트 빌드 방법

Step 1: 컴포넌트 내보내기 (export)

• export default 접두사는 표준 JavaScript 구문 (React에만 해당되지 않음)
  • 이 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있도록 할 수 있음

Step 2: 함수 정의하기

• function Profile() { }을 사용하면 Profile이라는 이름의 JavaScript 함수를 정의 가능

Step 3: 마크업 추가하기

• JSX: HTML처럼 작성되지만 실제로는 JavaScript이며 JavaScript 안에 마크업을 삽입할 수 있는 확장 구문, 브라우저가 인식하지 못하기 때문에 자바스크립트로 컴파일해줘야 함

🙋‍♀️ JSX란? (정리)

• 자바스크립트 확장 문법
• 형태는 HTML과 유사하지만 HTML보다 엄격함
• 브라우저가 인식을 못하기 때문에 바벨을 통해 자바스크립트 형태로 컴파일해줘야
• HTML 마크업 안에 중괄호를 통해 자바스크립트를 삽입할 수 있음

📌 컴포넌트 사용하기

• 컴포넌트를 정의(선언)한 후 다른 컴포넌트 안에 중첩 가능

컴포넌트 중첩

• 컴포넌트는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트(= 여러 자바스크립트 함수)를 포함할 수 있습니다.
• 이러한 특징은 컴포넌트가 상대적으로 작고 서로 밀접하게 관련되어 있을 때 편리함
• 컴포넌트 크기가 커질 경우 언제든지 import/export를 통해 컴포넌트를 별도의 파일에서 내보내고 다른 파일에서 사용할 수 있음
• 컴포넌트를 한 번 정의한 다음, 원하는 곳에서 여러 번 사용할 수 있다

📌 컴포넌트 import 및 export

• 컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합하여 또 다른 컴포넌트를 만들 수 있다는 점
• 컴포넌트를 여러 번 중첩하게 되면 컴포넌트 크기가 커져서 다른 파일로 분리해야 하는 시점이 생김
  • 이때 적절하게 컴포넌트를 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해짐
• React의 root 컴포넌트 파일은 App.js
• root 컴포넌트 파일 밖으로 옮기면 컴포넌트의 모듈성이 강화되어 새로운 데이터 추가나 컴포넌트 위치 변경이 쉬워짐

🙋‍♀️ 컴포넌트 이동하는 3단계
1. 컴포넌트 파일 생성
2. 함수 컴포넌트를 default 또는 named export(중괄호 사용) 방식을 사용하여 export
3. 이후 컴포넌트를 '사용'할 파일에서 해당 컴포넌트를 import (default 또는 named export에 대응하는 방식으로)

🌊 Deep Dive: Default exports와 named exports

• 두 방법 다 한 파일에서 사용 가능
  • 한 파일에는 하나의 default export만 존재할 수 있고 named export는 여러 개가 존재 가능
• export 하는 방식에 따라 import 하는 방식이 정해짐
  • 예: Default export한 값을 named import로 가져오려고 하면 에러 발생
• Default import의 특징
  • import한 뒤 다른 이름으로 가져올 수 있음
  • 예: import Button from './button.js'를 import Banana from './button.js' 로 가져오는 것 가능
• 하지만 named import일 때는 양쪽 파일에서 사용하고자 하는 이름이 같아야
  • 'named' import인 이유
• 보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때는 default export를 사용, 여러 컴포넌트를 export할 때는 named export를 사용
  • 어떤 방식을 사용하든지 간에 컴포넌트와 파일의 이름을 일관성 있게 명명하는 것이 중요

🙋‍♀️ 익명 컴포넌트 주의
export default () => {} 처럼 이름이 없는 익명 컴포넌트는 나중에 디버깅하기 어렵기 때문에 권장하지 않음

📌 예제에서 사용된 exports 예시

요약

작은 조각 컴포넌트(Profile.js)는 named exports, 상대적으로 큰 단위인 부모 컴포넌트(Gallery.js)와 App.js는 default exports 사용

• 실제 프로젝트에서도 App.js와 Page 단위의 큰 컴포넌트는 default, components 파일 안에 있는 작은 컴포넌트는 named로 exports한 경우가 많았음