소개

  • 4분

대화형 애플리케이션을 만들려면 데이터를 수정하고 사용자 요청에 응답할 수 있어야 합니다. React에서 이 기능은 상태와 이벤트를 통해 관리됩니다.

‘상태’는 애플리케이션 전체 구성 요소 간에 업데이트되고 공유될 수 있는 데이터입니다. ‘이벤트’를 사용하면 사용자가 애플리케이션을 조작할 수 있는 모든 방법(클릭, 입력, 탭)을 처리할 수 있습니다.

목표

이 모듈에서는 다음을 수행합니다.

  • 애플리케이션에 상태를 추가합니다.
  • 이벤트 처리기를 추가합니다.
  • 효과 후크를 사용하여 상태 변경에 응답합니다.

전제 조건

  • JavaScript, HTML, CSS에 대한 지식
  • React 구성 요소에 대한 기본 이해
  • Visual Studio Code와 같은 코드 편집기
  • 로컬에 설치된 Node.js
  • 로컬에 설치된 Git
  • 다음 섹션에서 설명하는 시작 프로젝트

프로젝트 복제

이 모듈에서는 시작 프로젝트를 사용합니다. 프로젝트를 복제하고 Visual Studio Code에서 엽니다.

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

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. Visual Studio Code에서 보기>터미널을 선택하여 통합 터미널을 엽니다. 또는 Ctrl+`를 선택합니다. Mac에서는 Cmd+`를 선택합니다.

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

    npm install
npm start

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