소개

  • 3분

구성 요소는 재사용 가능한 자체 포함 단위이며, 모든 React 애플리케이션의 핵심 구성 요소입니다. 구성 요소에는 자체 속성(또는 props)이 존재할 수 있으며, 사용자는 속성을 이용해 데이터를 구성 요소로 전달하여 다양한 시나리오에서 재사용할 수 있습니다. 또한 문자열과 기본 형식 외에 더 복잡한 데이터를 사용할 수 있으므로, 구성 요소의 효율을 높일 수 있습니다.

목표

이 모듈에서는 다음을 수행하는 방법을 알아봅니다.

  • 동적 데이터를 표시합니다.
  • 데이터 목록을 표시합니다.
  • 구성 요소에 속성(props)을 추가합니다.
  • 개체 및 복합 데이터 형식을 사용합니다.

전제 조건

기술

  • HTML, CSS 및 JavaScript 관련 지식
  • React 및 React 구성 요소에 대한 기본 지식
  • Node.js 및 npm을 사용한 패키지 관리 관련 지식
  • Git 관련 지식

로컬에 설치한 소프트웨어

프로젝트를 복제하고 Visual Studio Code에서 코드 열기

이 모듈에서는 시작 프로젝트를 사용합니다.

  1. 시작 프로젝트를 가져오려면 명령 창이나 터미널 창에서 다음 코드를 실행합니다. 이 코드는 리포지토리를 복제하고 Visual Studio Code에서 시작 폴더를 엽니다.

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\2-component-data\start
code .

# macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/2-component-data/start
code .

  2. 보기>터미널(Windows에서는 Ctl-`, Mac에서는 Cmd-`)을 선택하여 Visual Studio Code에서 통합 터미널을 엽니다.

  3. 터미널에서 다음 코드를 실행하여 필요한 패키지를 설치하고 개발 서버를 시작합니다.

    npm install
npm start

  4. 기본 브라우저가 자동으로 열립니다. 자동으로 열리지 않는다면 브라우저를 열고 http://locahost:8080으로 이동합니다. 시작 페이지가 나타납니다.