🎯[Detail] Component

https://ko.react.dev/learn/your-first-component

1. 컴포넌트 정의하기

1. 기존에는 웹 페이지를 만들 때 웹 개발자가 컨텐츠를 마크업한 다음
2. JavaScript를 뿌려 상호작용을 추가

⏩ 웹에서 상호작용이 중요했던 시절에 효과적

• 이제는 많은 사이트와 모든 앱에서 상호작용을 기대합니다
• React는 동일한 기술을 사용하면서도 상호작용을 우선시

React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

2. 컴포넌트 빌드

1. 컴포넌트 내보내기

• export default 접두사는 표준 JavaScript 구문
• 이 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있도록 파일에 주요 기능을 표시 가능

2. 내보낼 함수 정의
   React 컴포넌트는 일반 JavaScript 함수이지만, 이름은 대문자로 시작해야 함

3. 마크업 추가

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

• 이 컴포넌트는 src 및 alt 속성을 가진 <img /> 태그를 반환
• <img />는 HTML처럼 작성되었지만 실제로는 JavaScript
• 이 구문을 JSX라고 하며, JavaScript 안에 마크업을 삽입
• 반환문은 이 컴포넌트에서처럼 한 줄에 모두 작성 가능
• 그러나 마크업이 모두 return 키워드와 같은 라인에 있지 않은 경우에는 다음과 같이 괄호로 묶어 작성
• 괄호가 없으면 return 뒷 라인에 있는 모든 코드가 무시됨

3. 예시

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

브라우저에 표시되는 내용

대소문자 차이에 주목

• <section>은 소문자이므로 React는 HTML태그를 가리킨다고 컴파일
• <Profile />은 대문자 p로 시작하므로 React는 Profile이라는 컴포넌트를 사용하고자 한다고 컴파일
• Profile은 더 많은 <img />가 포함

브라우저에 표시되는 내용

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

4. 컴포넌트 중첩 및 구성

• 컴포넌트는 일반 JavaScript함수이므로 같은 파일에 여러 컴포넌트를 포함 가능
• 컴포넌트가 상대적으로 작거나 서로 밀접하게 관련되어 있을 때 편리
• Profile 컴포넌트는 Gallery 안에서 여러번 렌더링
  ⏩ Gallery는 각 Profil을 “자식”으로 렌더링하는 "부모" 컴포넌트
  ⏩ 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 장점

❗ 컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안 됩니다. ❗
최상위 레벨에서 컴포넌트를 정의
자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우 props로 전달

export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됨
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ 최상위 레벨에서 컴포넌트를 선언
function Profile() {
  // ...
}

5. More Details

• React 애플리케이션은 root 컴포넌트에서 시작

• 보통 새 프로젝트를 시작할 때 자동으로 생성

• Next.js를 사용하는 경우, root 컴포넌트는 pages/index.js에 정의

• React 앱은 모든 부분에서 컴포넌트를 사용

• 버튼과 같이 재사용 가능한 부분뿐만 아니라 사이드바, 목록 등등...

• 궁극적으로 전체 페이지와 같은 큰 부분에도 컴포넌트를 사용

• 컴포넌트는 한 번만 사용되더라도 UI 코드와 마크업을 정리하는 편리한 방법

6. Summary

• React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있다.

• React 앱에서 모든 UI는 컴포넌트입니다.

• React 컴포넌트는 다음 몇 가지를 제외하고는 일반적인 JavaScript 함수이다.
  1. 컴포넌트의 이름은 항상 대문자로 시작
  2. JSX 마크업을 반환