분류 Reactjs

Create React App 시작하기 (3)

컨텐츠 정보

  • 조회 248 (작성일 )

본문

<App>는 이 앱의 루트 구성 요소입니다. App.js가 정의되어있는 곳을 살펴 보겠습니다.


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

App component는 React 컴포넌트를 정의하기 위해 React의 Component 클래스를 확장한 클래스입니다. 이곳은 우리가 관심을 갖고 있는 곳입니다. 모든 응용 프로그램은 내용을 제거하고 App.js를 조정하여 구축 할 수 있습니다. src/components/ 폴더 내부에 React 컴포넌트를 별도로 빌드하고 App.js 안에 이러한 컴포넌트를 가져올 수도 있습니다.


0*UHEz5M7gHFF1uY43 

React app의 구조 


일반적인 React 애플리케이션은 위 그림과 비슷합니다. 다른 하위 구성 요소를 가져오고 다른 하위 구성 요소를 가져 오는 루트 구성 요소인 << App>이 있습니다. 데이터는 React 속성을 통해 루트에서 하위로 흐르고 콜백 함수를 사용하여 다시 흐릅니다. 기본 React 응용 프로그램에서 사용하는 디자인 패턴입니다.


이제 App.js를 조정하고 필요한 구성 요소를 추가하여 간단한 단일 페이지 응용 프로그램을 구축 할 수 있습니다. App.css 파일은 응용 프로그램의 스타일을 지정하는 데 사용할 수 있습니다.


음식점 앱 평가 


최종 앱은 다음과 같습니다.


Animated GIF

최종 응용 프로그램의 데모.


첫 번째 단계는 앱의 상태 비 저장 구성 요소를 작성하는 것입니다.이를 위해서는 데이터 및 평가 시스템이 포함 된 카드를 만들어야 합니다. 이를 위해 우리는 inside src/ components/안에 라는 폴더를 만들고 card.js라는 파일을 추가합니다 :