React 공식문서 - Your First Component(첫번째 컴포넌트)

Components: UI building blocks(컴포넌트: UI 구성 요소)

 

React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"로 결합할 수 있고, HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인할 수 있다. 프로젝트가 커질수록 컴포넌트의 재사용은 많은 디자인을 구성할 수 있게 해주고 개발 속도를 빠르게 해준다.

---

Defining a component(컴포넌트 정의하기)

 

기존의 웹페이지 개발에서는 웹 개발자가 콘텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했다면, React 컴포넌트는 마크업으로 뿌릴수 있는 JavaScript 함수다.

 

Step 1: Export the component(컴포넌트 내보내기)

 

export default 접두사는 표준 JavaScript 구문으로 다른 파일에서 가져올 수 있도록 파일에 주요 기능을 표시할 수 있다.

 

Step 2: Define the function(함수 정의하기)

 

React 컴포넌트는 일반 JavaScript 함수이지만, JSX 안에서는 반드시 대문자로 시작해야 작동한다.

 

Step 3: Add markup(마크업 추가하기)

 

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

위 코드는 HTML처럼 작성되었지만, 실제로는 JavaScript이며 이러한 구문을 JSX 구문이라고 한다.

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

위와 같이 마크업이 모두 return 키워드와 같은 라인에 있지 않은 경우에는 괄호로 묶어야 한다.

* 만약 괄호가 없다면 return 뒷 라인에 있는 모든 코드는 무시된다.

---

Using a component(컴포넌트 사용하기)

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>
  );
}

위와 같이 Profile 컴포넌트를 정의하고, 다른 컴포넌트 안에 중첩을 하고 Gallery 컴포넌트를 내보낼 수 있다.

---

What the browser sees(브라우저에 표시되는 내용)

 

<section>과 같이 소문자로 시작하는 태그를 React는 HTML 태그로 이해하지만, <Profile>과 같이 대문자로 시작하는 태그는 React가 사용자 정의 컴포넌트로 이해한다.

---

Nesting and organizing components(컴포넌트 중첩 및 구성)

 

컴포넌트는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 포함시킬 수 있고, 컴포넌트가 크고 복잡해지면 언제든지 별도의 파일로 옮길 수가 있다.

 

* 컴포넌트는 다른 컴포넌트를 중첩해서 렌더링할 수 있지만, 그 정의 자체를 중첩하면 매우 느리고 버그를 촉발하기 때문에 정의 자체를 중첩하는 것은 안된다. 모든 컴포넌트는 항상 최상위 레벨에서 정의되어야 한다.

// 컴포넌트 내부에서 다른 컴포넌트의 정의를 중첩하는 경우
export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

// 각각 컴포넌트를 최상위 레벨에서 정의하는 경우
export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

 * 자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요하면 정의를 중첩하는 대신 props로 전달해야 한다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)