[React] UI 표현하기 - 첫 번째 컴포넌트

Gyuhan Park·2024년 1월 29일

공식문서

목록 보기

1/10

💭 TMI

드디어 react 공식문서를 읽기 시작했다. 공식문서를 봐야한다는 이야기는 많이 들었지만 공식문서라는 단어에서 오는 부담감과 무게감이 있었다. 그리고 괜히 안읽히는 느낌이 들기도 하였다. 하지만 이번에 읽게 된 계기는 기준 을 세우고 싶었다. 프로젝트를 인수인계받으면서 코드를 리팩토링하고 싶다는 생각이 들었지만, 내가 바꾼 부분이 오히려 더 복잡하게 만들 지도 모른다.
공식문서를 읽으면서 알고 있는 부분은 탄탄하게, 헷갈리는 부분은 정확하게 기준을 잡아가는 시간이 되었으면 한다.
정리를 하는 이유는 공식문서에 적힌 내용을 내언어로 바꾸면서 머릿속에 남기기 위해서고, 블로그에 적는 이유는 다른 사람들도 공식문서를 쉽게 접할 수 있도록 잘 정리한 내용을 공유하기 위해서다.

[ 요약 ]
React를 사용하면 재사용 가능한 UI 요소인 컴포넌트 생성 가능
React에서 모든 UI는 컴포넌트
React 컴포넌트는 일반적인 JavaScript 함수 + 특징 존재
컴포넌트의 이름은 항상 대문자 로 시작
JSX 마크업 반환

[ 학습 내용 ]

컴포넌트가 무엇일까

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>

React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 컴포넌트 로 결합 가능

내부적으로는 여전히 HTML태그를 사용하지만 여러 페이지에 렌더링할 수 있는 컴포넌트로 전환 가능
이미 작성한 컴포넌트를 재사용 하여 많은 디자인을 구성 가능
마크업 코드를 컴포넌트로 전환 가능 (내부적으로는 <article>, <h1> 등 동일한 HTML태그 사용)

📘 컴포넌트 정의하기

컴포넌트 내보내기 (export default {컴포넌트명})

함수 정의하기 (React 컴포넌트는 대문자로 시작해야함)

마크업 추가하기 (HTML 형태의 javscript : JSX)

HTML 마크업 문서 작성 후 JS로 상호작용을 추가했던 이전과 달리 React는 상호작용 중점

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

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

export default 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있음

✅ 2단계: 함수 정의하기

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

React 컴포넌트는 일반 JavaScript 함수이지만, 무조건 컴포넌트 이름은 대문자로 시작해야 한다.

✅ 3단계: 마크업 추가하기

Profile 컴포넌트는 <img /> 태그 반환

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

HTML처럼 보이지만 실제로는 Javscript인 구문 : JSX
Javascript 안에 마크업 삽입 가능
return 문이 한줄이 아닌 경우 ( ) 로 묶어야함

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

📘 컴포넌트 사용하기

정의한 컴포넌트를 다른 컴포넌트 안에 중첩하여 사용 가능

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 />은 대문자로 시작하므로 React는 Profile이라는 컴포넌트를 사용하고자 한다고 이해

// Gallery 컴포넌트 사용
<Gallery />

// 실제 화면에 보이는 HTML 태그
<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 함수이므로 같은 파일에 여러 컴포넌트 포함 가능
Gallery : Profile을 자식으로 렌더링하는 부모 컴포넌트
컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용 가능

🚨 주의하세요!

컴포넌트는 다른 컴포넌트 렌더링 ✅ 중첩 정의 ❌

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

중첩 정의 시 매우 느리고 버그를 촉발
같은 함수에서 다른 컴포넌트를 렌더링할 때마다 React는 그 아래의 모든 state를 초기화하기 때문
→ 최상위 레벨에서 컴포넌트 정의
자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우, 정의를 중첩하는 대신 props 로 전달

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

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

✅ 컴포넌트의 모든 것

root 컴포넌트 에서 시작
모든 부분에서 컴포넌트를 사용 (컴포넌트는 한 번만 사용되더라도 UI 코드와 마크업을 정리하는 용도로 사용)
**React 기반 프레임워크** : 빈 HTML파일에 JavaScript로 페이지 관리를 다룰 수 있게 하는 대신, React
컴포넌트에서 HTML을 생성하여 JS 코드가 로드되기 전에 앱에서 일부 컨텐츠 표시
React를 약간의 상호작용을 추가하는 용도로만 사용하기도 함

전체 페이지에 여러 개의 root 컴포넌트 존재
필요한 만큼 React 사용

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