본 글은 React 공식문서를 정리 한 글입니다. 
더 자세한 내용은 https://react.dev/을 참고하시길 바랍니다.

컴포넌트는 React의 중요한 개념 중 하나이며 사용자 인터페이스 UI를 구축하는 기초입니다. 여기서 우리는 다음과 같은 내용을 배웁니다.

  • 컴포넌트가 무엇인지
  • React 애플리케이션 내에서 컴포넌트의 역할
  • 첫번째 React 컴포넌트를 작성하는 방법

컴포넌트 : UI  빌딩 블록

웹에서 HTML을 사용하면 다음과 같은 내장된 태그 세트 <h1>,<li>를 사용하여 풍부하고 구조환된 문서를 만들 수 있습니다.

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

 이 마크업은 이 기사 <article>, 제목 <h1>및 <ol>(축약된) 목차를 순서가 지정된 목록으로 나타냅니다. 스타일을 위한 CSS, 상호작용을 위한 JavaScript와 결합된 이러한 마크업은 웹에서 볼 수 있는 모든 사이드바, 아바타, 모달, 드롭다운 등 UI의 모든 부분 뒤에 있습니다.

 React를 사용하면 마크업, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "구성 요소"로 결합할 수 있습니다. 위에서 본 목차 코드는 모든 페이지에서 렌더링할 수 있는 구성 요소 <TableOfContents />로 바뀔 수 있습니다. 내부적으로는 여전히 <article>, <h1>등과 같은 동일한 HTML 태그를 사용합니다.

 HTML 태그와 마찬가지로 구성 요소를 구성, 정렬 및 중첩하여 전체 페이지를 디자인할 수 있습니다. 예를 들어, 읽고 있는 문서 페이지는 React 구성 요소로 구성되어 있습니다.

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

 프로젝트가 성장함에 따라 이미 작성한 구성 요소를 재사용하여 많은 디자인을 구성하여 개발 속도를 높일 수 있다는 것을 알게 될 것입니다. 위의 목차는 <TableOfContents />!을 사용하여 어떤 화면에도 추가할 수 있습니다. Chakra UI 및 Material UI 와 같은 React 오픈 소스 커뮤니티에서 공유하는 수천 개의 구성 요소를 사용하여 프로젝트를 시작할 수도 있습니다.

구성 요소 정의

전통적으로 웹 페이지를 만들 때 웹 개발자는 콘텐츠를 표시한 다음 일부 JavaScript를 뿌려 상호 작용을 추가했습니다. 이는 웹에서 상호 작용이 있으면 훌륭하게 작동했습니다. React는 동일한 기술을 사용하면서도 상호작용을 최우선으로 생각합니다. React 컴포넌트는 마크업을 뿌릴 수 있는 JavaScript 함수입니다 . 그 모습은 다음과 같습니다.

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

구성요소를 빌드하는 방법은 다음과 같습니다.

1단계 : 컴포넌트 내보내기

접두사 export default  는 표준 JavaScript 구문입니다 (React에만 국한되지 않음). 나중에 다른 파일에서 가져올 수 있도록 파일의 주요 기능을 표시할 수 있습니다. ( 컴포넌트 가져오기 및 내보내기 에서 가져오기에 대해 자세히 알아보세요 .)

2단계 : 함수 정의

 function Profile() {} 로 Profile 라는 이름의 JavaScript 함수를 정의합니다.

  • React 구성 요소는 일반 JavaScript 함수이지만 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다!

3단계 : 마크업 추가

 컴포넌트는 src 및 alt 속성이 포함된 <img/> 태그를 반환합니다 . HTML처럼 작성되었지만 실제로는 내부적으로는 JavaScript입니다! 이 구문을 JSX 라고 하며 이를 사용하면 JavaScript 내에 마크업을 삽입할 수 있습니다. 마크업이 모두 return 키워드와 같은 줄에 있지 않으면 마크업을 한 쌍의 괄호로 묶어야 합니다.

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);
  • 괄호가 없으면 다음 줄의 모든 코드는 return 무시됩니다 !

컴포넌트 사용

 이제 컴포넌트를 정의했으므로 Profile를 다른 컴포넌트 내에 중첩할 수 있습니다. 예를 들어 여러 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 내보낼 수 있습니다.

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은 더 많은 HTML을 포함합니다: <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>

 

컴포넌트 중첩 및 구성하기

 컴포넌트는 일반 JavaScript 함수이므로 동일한 파일에 여러 구성 요소를 유지할 수 있습니다. 이는 컴포넌트가 상대적으로 작거나 서로 밀접하게 관련되어 있는 경우 편리합니다. 이 파일이 복잡해지면 언제든지 Profile을 별도의 파일로 이동시킬 수 있습니다. Gallery 컴포넌트는 내부에서 여러 번 컴포넌트가 렌더링되기 때문에 상위 구성 요소라고 말할 수 있으며 각 구성 요소  Profile 컴포넌트를 " 자식"으로 렌더링합니다. 컴포넌트를 한 번 정의하면 원하는 만큼 여러 장소에서 사용할 수 있습니다.

  • 구성 요소는 다른 구성 요소를 렌더링할 수 있지만 정의를 중첩해서는 안 됩니다.
export default function Gallery() {
  // 🔴 컴포너트를 다른 컴포넌트 안에서 정의하지 마세요!
  function Profile() {
    // ...
  }
  // ...
}
export default function Gallery() {
  // ...
}

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

 하위 구성 요소에 상위 구성 요소의 일부 데이터가 필요한 경우 중첩 정의 대신 소품으로 전달하세요 .

심화 개념 : 컴포너트 파헤치기

 React 애플리케이션은 "root" 컴포넌트에서 시작됩니다. 일반적으로 새 프로젝트를 시작하면 자동으로 생성됩니다. 예를 들어 CodeSandbox를 사용하거나 Next.js 프레임워크를 사용하는 경우 루트 구성 요소는 pages/index.js.로 정의됩니다.

 대부분의 React 앱은 컴포넌트를 끝까지 사용합니다. 즉, 버튼과 같은 재사용 가능한 부분뿐만 아니라 사이드바, 목록, 최종적으로는 전체 페이지와 같은 더 큰 부분에도 컴포넌트를 사용할 수 있습니다. 컴포넌트는 일부가 한 번만 사용되더라도 UI 코드와 마크업을 구성하는 편리한 방법입니다.

 React 기반 프레임워크는 이를 한 단계 더 발전시킵니다. 빈 HTML 파일을 사용하고 React가 JavaScript로 페이지 관리를 "인계"하도록 하는 대신, React 구성 요소에서 자동 으로 HTML을 생성합니다. 이를 통해 JavaScript 코드가 로드되기 전에 앱에서 일부 콘텐츠를 표시할 수 있습니다.

 그럼에도 불구하고 많은 웹사이트는 기존 HTML 페이지에 상호작용성을 추가하기 위해서만 React를 사용합니다. 전체 페이지에 대해 단일 루트 구성 요소 대신 많은 루트 구성 요소가 있습니다. 필요한 만큼 React을 사용할 수 있습니다

요약

  • React를 사용하면 앱의 재사용 가능한 UI 요소인 구성 요소를 만들 수 있습니다 .
  • React 앱에서 UI의 모든 부분은 구성 요소입니다.
  • React 구성요소는 다음을 제외한 일반 JavaScript 함수입니다.
    1. 그들의 이름은 항상 대문자로 시작됩니다.
    2. JSX 마크업을 반환합니다.

과제 답안

// 1.컴포넌트 내보내기

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}
// 2. return 문을 수정하세요

export default function Profile() {
  return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
}
// 3. 컴포넌트 선언 실수 찾기

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
// 4.컴포넌트 만들기

// Write your component below!
export default function Congratulation(){
  return(
    <h1>
      Good job!
    </h1>
  )
}

'React' 카테고리의 다른 글

React .03 : UI 이해하기 - Component 가져오기와 내보내기  (0) 2024.03.19
React .03 : Thinking in React  (0) 2024.03.11
React .02 : Tutorial : Tic - Tac -Toe(3)  (0) 2024.03.08
React .02 : Tutorial : Tic - Tac -Toe(2)  (0) 2024.03.08
React .02 : Tutorial : Tic - Tac -Toe(1)  (0) 2024.03.08

+ Recent posts

티스토리툴바