React 공식문서 이해하기 (1)

Syoee·2023년 11월 9일

React

목록 보기

1/30

시작 동기

Vue로 프로젝트를 진행하는 중, React로 기술스택을 바꾸게 되어 과거에 React를 사용했었지만 확실하게 짚고 넘어가고자 하는 부분들이 있어 공식문서를 단계별로 정독하며 정리해보려 한다.

Chapter 1. Describing the UI

#1 첫 번째 컴포넌트

학습 목차

1. Components란?
2. Component 사용하기

1. Components란?

1-1. Components의 정의

• React component는 markup으로 뿌릴 수 있는 JavaScript 함수이다.

markup → 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지

1-2. Components: UI 구성 요소

• React를 사용하면 markup, CSS 및 JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "구성 요소"로 결합할 수 있다.
• HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인을 할 수 있다.
• 프로젝트가 성장함에 따라, 이미 작성한 component를 재사용하여 많은 디자인을 구성할 수 있으므로 개발 속도를 빠르게 할 수 있다.
• Material UI와 같은 React 오픈소스 커뮤니티에서 공유되는 수천 개의 컴포넌트로 프로젝트를 빠르게 시작할 수 있다.

1-3. Component 빌드하는 방법

// 예시

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

  Step 01. 컴포넌트 내보내기
  • export default 접두사는 표준 JavaScript 구문이다. (React에만 해당되지 않음)
  • 해당 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있도록 파일에 주요 기능 표시할 수 있다.

  Step 02. 함수 정의하기
  • function Profile() { } 사용 시, Profile이라는 이름의 JavaScript 함수를 정의할 수 있다.
  • React 컴포넌트는 일반 JavaScript 함수이고, JSX 안에서는 반드시 대문자로 시작해야 하지만, 그 외의 상황에서는 무관하다.

  Step 03. markup 추가하기
  • 이 컴포넌트는 src 및 alt 속성을 가진 <img /> 태그를 반환한다.
  • <img /> 는 HTML처럼 작성되었지만 실제로는 JavaScript이다.
  • 이 구문을 JSX라고 하며, JavaScript 안에 markup을 삽입할 수 있다.
  • 반환문은 아래 component에서처럼 한 줄에 모두 작성할 수 있다

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

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

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

! 주의 ! 괄호가 없으면 return 뒷 라인에 있는 모든 코드가 무시된다.

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

2-1. Browser에 표시되는 내용

  • 대소문자의 차이에 주목하라
   →<section> 은 소문자이므로 React는 HTML 태그를 가리킨다고 이해한다.
   →<Profile /> 은 대문자 P 로 시작하므로 React는 Profile 이라는 component를 사용하고자 한다고       이해한다.
  • <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>

2-2. 컴포넌트 중첩 및 구성

  • component는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있다.
   → component가 상대적으로 작거나 서로 밀접하게 관련되어 있을 때 편리하다.
   → 파일이 복잡해지면 언제든지 Profile 을 별도의 파일로 옮길 수 있다.
   → 이 방법은 바로 다음 챕터인 컴포넌트 import 및 export 페이지에서 확인할 수 있다.
• Profile component는 Gallery 내에 렌더링되기 때문에, Gallery는 각 Profile 을 “자식”으로     렌더링하는 부모 컴포넌트라고 말할 수 있다.
   → 컴포넌트를 한 번 정의한 다음 원하는 곳에 원하는 만큼 여러 번 사용할 수 있다는 점이 React의 장점이다.

! 주의 ! 컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안 된다.
! 주의 ! 자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우,
정의를 중첩하는 대신 props로 전달하는 것이 좋다.

Rendering(렌더링) → 웹 페이지나 애플리케이션을 사용자에게 보여주기 위해 HTML, CSS 및 JavaScript 등을 이용하여 화면에 그리는 과정

요약

• React를 사용하면 앱의 재사용 가능한 UI 요소인 컴포넌트를 만들 수 있다.
• React 앱에서 모든 UI는 component이다.
• React component는 아래 몇 가지를 제외하고는 일반적인 JavaScript 함수이다.
→ component의 이름은 항상 대문자로 시작한다.
→ JSX markup을 반환한다.