전문가들이 React를 사용하는 이유

레벨 1의 어려움을 기억하고 구성요소가 발명된 이유를 이해하게 될 것야. 읽기 전용 수업야.

그 메뉴를 복사했던 것을 기억하시나요?

레벨 1에서는 모든 페이지에 메뉴가 있는 헤더가 있었어. 그리고 새 페이지를 추가할 때마다 메뉴를 복사하고 변경 사항이 있을 때마다 어디서나 수정해야 했어. 세 페이지는 짜증나고, 서른 페이지는 악몽이다. 그리고 그 고통이 바로 우리의 이야기가 시작되는 곳야.

구성 요소: 한 번 작성하면 어디에서나 사용 가능

전문가들은 메뉴가 모든 페이지에 “삽입”되는 하나의 코드라면 어떨까라고 생각했어. 한 곳에서 변경해. 모든 곳에서 변경돼. 이와 같은 부분을 구성요소라고 해.

그리고 그것은 단지 메뉴가 아닙니다. 빌딩 블록 세트의 눈으로 웹사이트를 살펴보세요.

선수 카드(4개를 가지고 있으며 이름과 위치만 다릅니다),
갤러리에 있는 사진(10× – 이미지만 다름),
버튼(어디서나 텍스트만 다름).

전문가의 웹사이트는 HTML 파일 더미가 아닙니다. 이는 LEGO 상자야. 전체 애플리케이션에 조립된 소수의 맞춤형 블록(구성 요소)야.

리액트란 무엇인가

React는 이런 종류의 어셈블리를 처리하는 JavaScript용 도구(라이브러리)야. Facebook에서 발명되었으며 무료이며 Facebook, Instagram, Netflix, Airbnb 등 인터넷의 상당 부분이 이를 기반으로 구축되었어. React의 구성 요소는 다음과 같어. 걱정하지 마세요. 지금 찾고 있는 것뿐야.

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

그리고 이는 사용자 정의 HTML 태그처럼 사용돼.

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

너는 이것을 인식합니까? HTML을 반환하는 함수(레벨 2의)야. 카드는 한 번만 작성하면 서로 다른 데이터와 함께 사용돼. 마치 교체 가능한 문자가 있는 고무 도장과 같어.

두 번째 초강력: React가 다시 그리기를 처리해.

레벨 2에서는 “요소 찾기, 텍스트 변경, 클래스 추가…”라고 썼어. 대규모 애플리케이션에서는 수동으로 재배열하는 작업이 너무 많아서 길을 잃을 수도 있어. React는 이를 뒤집어:

주어진 데이터에 대한 페이지의 모양을 설명해. 데이터가 변경되면 React는 무엇을 다시 그릴지 스스로 파악해.

점수가 0에서 1로 바뀌나요? 어떤 요소도 찾지 않고 숫자만 변경하면 React는 필요한 모든 것을 다시 그립니다. 상태에 대한 강의에서 실제로 작동하는 모습을 볼 수 있어.

이 레벨에는 어떤 일이 일어날까요?

전문 도구인 터미널 및 Node.js를 설치해(다음 강의).
Vite를 사용하여 첫 번째 React 앱을 설정해.
컴포넌트, props, 상태를 배우게 돼.
React에서 레벨 1 웹사이트를 다시 구축해.
자신만의 Node.js 서버를 구축하고 여기에 방명록을 연결해.

💡

**오늘 수업의 모든 내용을 완전히 이해할 필요는 없어.** 한 문장만 빼면 돼: React = 구성 요소(LEGO 벽돌) + 자동 다시 그리기. 앞으로의 강의에서 다른 모든 내용을 직접 실습해 볼 수 있어.

이번 수업에서 배울 점

동일한 코드를 여러 곳에 복사하는 것은 함정야. 이미 레벨 1에서 스스로 발견한 것야.
구성 요소는 페이지의 일부를 반환하는 함수야. 한 번 작성하면 다양한 데이터로 여러 번 사용할 수 있어.
React는 페이지를 다시 그립니다. 데이터를 변경하면 화면이 변경돼.