분류 Reactjs

React 시작하기 : 초보자 가이드

컨텐츠 정보

  • 조회 35 (작성일 )

본문

React는 개발 커뮤니티를 강타한 놀라운 JavaScript 라이브러리입니다.

간단히 말해서 개발자가 웹, 모바일 및 데스크톱 플랫폼을 위한 대화 형 사용자 인터페이스를 쉽게 구축 할 수 있게 되었습니다. 오늘날 넷플릭스와 에어 비앤비와 같은 유명 기업을 포함하여 전 세계 수천 개의 기업이 React를 사용하고 있습니다.


https://www.sitepoint.com/getting-started-react-beginners-guide/


이 가이드에서는 React와 몇 가지 기본 개념을 소개합니다. Create React App 도구를 사용하여 빠르게 시작하고 실행 한 다음 간단한 React 애플리케이션을 구축하는 프로세스를 단계별로 살펴 보겠습니다.

완료되면 기본 사항에 대한 좋은 개요를 갖게되며 React 여정의 다음 단계를 수행 할 준비가 됩니다.


전제 조건 


React를 배우기 전에 HTML, CSSJavaScript에 대한 기본적인 이해가 필요합니다. 또한 Node.jsnpm 패키지 관리자에 대한 기본적인 이해를 돕습니다.


이 가이드를 따르려면 머신에 Node와 npm이 모두 설치되어 있어야 합니다. 이렇게 하려면 Node.js 다운로드 페이지로 이동하여 필요한 버전을 가져옵니다 (npm은 Node와 함께 제공됨). 또는 버전 관리자를 사용하여 Node를 설치하는 방법에 대한 자습서를 참조 할 수 있습니다.


React 란 무엇입니까? 


React는 UI 구성 요소를 빌드하기 위한 JavaScript 라이브러리입니다. Angular 또는 Vue와 같은보다 완전한 프레임 워크와 달리 React는 뷰 레이어 만 처리하므로 라우팅, 상태 관리 등과 같은 작업을 처리하려면 추가 라이브러리가 필요합니다.

이 가이드에서는 React가 즉시 수행 할 수 있는 작업에 초점을 맞출 것입니다.


React 애플리케이션은 서로 상호 작용할 수 있는 재사용 가능한 UI 구성 요소를 사용하여 빌드됩니다. React 컴포넌트는 클래스 기반 컴포넌트 또는 소위 함수 컴포넌트 일 수 있습니다. 클래스 기반 구성 요소는 ES6 클래스를 사용하여 정의되는 반면 함수 구성 요소는 기본 JavaScript 함수입니다.

이들은 화살표 함수를 사용하여 정의되는 경향이 있지만 function 키워드를 사용할 수도 있습니다.

클래스 기반 구성 요소는 일부 JSX (React 요소를 만드는 데 사용되는 React의 일반 JavaScript 확장)를 반환하는 렌더링 함수를 구현하는 반면 함수 구성 요소는 JSX를 직접 반환합니다. JSX에 대해 들어 본 적이 없더라도 걱정하지 마세요. 나중에 자세히 살펴 보겠습니다.


React 구성 요소는 상태 저장 및 상태 비 저장 구성 요소로 더 분류 될 수 있습니다. 상태 비 저장 구성 요소의 작업은 단순히 부모 React 구성 요소에서받은 데이터를 표시하는 것입니다. 이벤트 나 입력을 수신하면 이를 처리 할 상위 항목으로 전달하기 만하면 됩니다.


반면에 상태 저장 구성 요소는 일종의 애플리케이션 상태를 유지하는 역할을 합니다. 여기에는 외부 소스에서 데이터를 가져 오거나 사용자가 로그인했는지 여부를 추적하는 것이 포함될 수 있습니다. 상태 저장 구성 요소는 이벤트 및 입력에 응답하여 상태를 업데이트 할 수 있습니다.


경험상 가능한 한 상태 비 저장 구성 요소를 작성하는 것을 목표로 해야 합니다. 애플리케이션과 다른 프로젝트에서 재사용 하기가 더 쉽습니다.


Virtual DOM 이해 


코딩을 시작하기 전에 React가 가상 DOM을 사용하여 페이지 렌더링을 처리한다는 점을 알아야 합니다. jQuery에 익숙하다면 HTML DOM을 통해 웹 페이지를 직접 조작 할 수 있다는 것을 알고 있을 것입니다. 대부분의 경우 이러한 직접적인 상호 작용은 문제가 거의 발생하지 않습니다.

그러나 고도의 대화 형 실시간 웹 애플리케이션 실행과 같은 특정 경우에는 성능이 상당히 저하 될 수 있습니다.


이에 대응하기 위해 Virtual DOM (실제 DOM의 메모리 내 표현) 개념이 발명되었으며 현재 React를 포함한 많은 최신 UI 프레임 워크에 적용되고 있습니다. HTML DOM과 달리 가상 DOM은 조작하기가 훨씬 쉽고 페이지 성능에 영향을 주지 않고 밀리 초 내에 수많은 작업을 처리 할 수 ​​있습니다.

React는 가상 DOM과 HTML DOM을 주기적으로 비교합니다. 그런 다음 diff를 계산하여 가상 DOM과 일치하도록 HTML DOM에 적용합니다.

이런 식으로 React는 애플리케이션이 초당 60 프레임으로 일관되게 렌더링 되도록 보장합니다. 즉, 사용자는 지연을 거의 또는 전혀 경험하지 않습니다.


빈 React 프로젝트 시작 


전제 조건에 따라 최신 버전의 npm (또는 선택적으로 Yarn)을 사용하여 이미 노드 환경이 설정되어 있다고 가정합니다.


다음으로, 단일 페이지 React 애플리케이션을 만들기 위한 공식 유틸리티 스크립트 인 Create React App을 사용하여 첫 번째 React 애플리케이션을 빌드 할 것입니다.


지금 설치하겠습니다.


npm i -g create-react-app

그런 다음 이를 사용하여 새 React 앱을 만듭니다.


create-react-app message-app

인터넷 연결 속도에 따라 create-react-app 명령을 처음 실행하는 경우 완료하는 데 시간이 걸릴 수 있습니다. 웹 서버, 컴파일러 및 테스트 도구를 포함하여 편리한 개발 환경을 설정하는 데 필요한 여러 패키지가 그 과정에서 설치됩니다.


너무 많은 패키지를 전역 적으로 설치하지 않으려면 npx를 사용하여 패키지를 설치하지 않고도 다운로드하고 실행할 수 있습니다.


npx i -g create-react-app

이 명령 중 하나를 실행하면 다음과 유사한 결과가 출력됩니다.


...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!

프로젝트 설정 프로세스가 완료되면 다음 명령을 실행하여 React 애플리케이션을 시작하십시오.


cd message-app
npm start

다음 출력이 표시되어야 합니다.


....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

기본 브라우저가 자동으로 실행되고 다음과 같은 화면이 표시됩니다.


Create React App 


스타터 React 프로젝트가 오류 없이 실행되고 있음을 확인 했으므로 이제 내부에서 무슨 일이 일어 났는지 살펴 보겠습니다. 좋아하는 코드 편집기를 사용하여 폴더 메시지 앱을 열 수 있습니다. package.json 파일부터 시작하겠습니다.


{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

보시다시피 Create React App은 우리를 위해 몇 가지 종속성을 설치했습니다.

처음 세 개는 React 코드를 테스트 할 수 있는 React Testing Library와 관련이 있습니다.

그런 다음 React 및 react-dom, 모든 React 애플리케이션의 핵심 패키지, 마지막으로 react-scripts로 개발 환경을 설정하고 서버를 시작합니다 (방금 본 것).


그런 다음 반복 작업을 자동화하는 데 사용되는 4 개의 npm 스크립트가 제공됩니다.


  • start는 dev 서버를 시작합니다
  • build는 앱의 프로덕션 준비 버전을 만듭니다.
  • test는 위에서 언급 한 테스트를 실행합니다.
  • eject는 앱의 개발 환경을 노출합니다.

이 마지막 명령은 자세히 설명 할 가치가 있습니다. Create React App 도구는 실제 코드와 개발 환경을 명확하게 구분합니다.

npm run eject를 실행하면 Create React App은 내부에서 수행하는 작업을 숨기지 않고 모든 것을 프로젝트의 package.json 파일에 덤프합니다.

이렇게 하면 앱의 종속성을 보다 세밀하게 제어 할 수 있지만 프로젝트를 빌드하고 테스트하는 데 사용되는 복잡한 코드를 모두 관리해야 하므로 이 방법을 권장하지 않습니다. 그렇다면 customize-cra를 사용하여 꺼내지 않고 빌드 프로세스를 구성 할 수 있습니다.


Create React App은 ESLint를 지원하기 위해 제공되며 (eslintConfig 속성에서 볼 수 있음) react-app ESLint 규칙을 사용하여 구성됩니다.


package.json 파일의 browserslist 속성을 사용하면 앱에서 지원할 브라우저 목록을 지정할 수 있습니다. 이 구성은 PostCSS 도구 및 Babel과 같은 트랜스 파일러에서 사용됩니다.


Create React App에서 가장 좋아할만한 기능 중 하나는 즉시 즉시 재로드 할 수 있다는 것입니다. 즉, 코드를 변경하면 브라우저가 자동으로 새로 고쳐집니다. JavaScript 코드를 변경하면 페이지가 다시 로드되고 CSS를 변경하면 다시 로드 하지 않고 DOM이 업데이트 됩니다.

 

지금은 먼저 Ctrl + C를 눌러 개발 서버를 중지하겠습니다. 서버가 중지되면 src 폴더에서 serviceWorker.js 및 setupTests.js 파일을 제외한 모든 파일을 삭제합니다. 서비스 워커가 수행하는 작업에 관심이 있는 경우 여기에서 자세히 알아볼 수 있습니다.


그 외에는 src 폴더의 모든 내용을 이해할 수 있도록 처음부터 모든 코드를 생성합니다.


JSX 구문 소개 


React 문서에서 "JavaScript에 대한 구문 확장"으로 정의 된 JSX는 React 구성 요소를 쉽게 작성할 수 있도록 합니다. JSX를 사용하여 HTML 구조 또는 React 요소를 표준 JavaScript 값처럼 전달할 수 있습니다.


다음은 간단한 예입니다.


import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}

const message = <h1> I 'm a heading </ h1>; 줄을 확인하십시오. 그것이 JSX입니다. 웹 브라우저에서 실행하려고 하면 오류가 발생합니다.

그러나 React 앱에서 JSX는 Babel과 같은 트랜스 파일러에 의해 해석되고 React가 이해할 수 있는 JavaScript 코드로 렌더링 됩니다.


참고 : "JSX 소개"자습서에서 JSX에 대해 자세히 알아볼 수 있습니다.


과거에 React JSX 파일은 .jsx 파일 확장자와 함께 제공되었습니다. 요즘 Create React App 도구는 .js 파일 확장자를 가진 React 파일을 생성합니다. .jsx 파일 확장자는 여전히 지원되지만 React의 관리자는 .js 사용을 권장합니다.

그러나 저를 포함하여 다음과 같은 이유로 .jsx 확장을 선호하는 반대되는 React 개발자 그룹이 있습니다.


  • VS Code에서 Emmet은 .jsx 파일에 대해 즉시 작동합니다. 그러나 모든 .js 파일을 JavaScriptReact로 처리하도록 VS Code를 구성하여 Emmet이 해당 파일에서 작동하도록 할 수 있습니다.
  • 표준 JavaScript 및 React JavaScript 코드에는 다른 linting 규칙이 있습니다.

그러나 이 튜토리얼에서는 Create React App이 제공하는 내용을 따르고 .js 파일 엔딩을 고수 할 것입니다.


Hello, World! in React 


몇 가지 코드를 작성해 보겠습니다. 새로 생성 된 메시지 앱의 src 폴더 안에 index.js 파일을 생성하고 다음 코드를 추가합니다.


import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

npm start 또는 yarn start를 사용하여 개발 서버를 다시 시작하십시오. 브라우저에 다음 내용이 표시되어야 합니다.


Hello React 


이것은 가장 기본적인“Hello World”React 예제입니다. index.js 파일은 React 구성 요소가 렌더링 되는 프로젝트의 루트입니다. 코드가 어떻게 작동하는지 설명하겠습니다.


  • 1 행 : JSX 처리를 처리하기 위해 React 패키지를 가져옵니다.
  • 2 행 : ReactDOM 패키지를 가져와 루트 React 구성 요소를 렌더링 합니다.
  • 3 행 : render 함수를 호출하여 다음을 전달합니다.
    <h1> Hello World </ h1> : JSX 요소
    document.getElementById ( 'root') : HTML 컨테이너 (JSX 요소는 여기에서 렌더링됩니다).


HTML 컨테이너는 public / index.html 파일에 있습니다. 31 행에 <div id = "root"> </ div>가 표시됩니다. 내부의 모든 것이 React 가상 DOM에 의해 관리되기 때문에 이것은 루트 DOM 노드로 알려져 있습니다.


JSX는 HTML과 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다. 예를 들어 클래스 속성은 자바 스크립트 키워드이므로 사용할 수 없습니다.

대신 className이 대신 사용됩니다. 또한 onclick과 같은 이벤트는 JSX에서 onClick으로 표기됩니다. 이제 Hello World 코드를 수정 해 보겠습니다.



const element = <div>Hello World</div>;
ReactDOM.render(element, document.getElementById('root'));

JSX 코드를 element라는 상수 변수로 옮겼습니다. 또한 h1 태그를 div 태그로 대체했습니다. JSX가 작동하려면 단일 부모 태그 안에 요소를 래핑 해야 합니다.


다음 예를 살펴보십시오.


const element = <span>Hello,</span> <span>Jane</span>;

위의 코드는 작동하지 않습니다. 인접한 JSX 요소를 둘러싸는 태그로 묶어야 한다는 구문 오류가 표시됩니다. 이 같은:


const element = <div>
    <span>Hello, </span>
    <span>Jane</span>
    </div>;

JSX에서 JavaScript 표현식을 평가하는 것은 어떻습니까? 단순한. 다음과 같이 중괄호를 사용하십시오.


const name = "Jane";
const element = <p>Hello, {name}</p>

… 또는 다음과 같이 :


const user = {
  firstName: 'Jane',
  lastName: 'Doe'
}
const element = <p>Hello, {user.firstName} {user.lastName}</p>

코드를 업데이트하고 브라우저에 "Hello, Jane Doe"가 표시되는지 확인합니다. {5 + 2}와 같은 다른 예를 사용해보세요. 이제 JSX 작업의 기본 사항을 익혔으므로 계속해서 React 컴포넌트를 생성 해 보겠습니다.


React 컴포넌트 선언 


위의 예제는 ReactDOM.render ()가 어떻게 작동하는지 보여주는 단순한 방법입니다. 일반적으로 우리는 React 컴포넌트 내에 모든 프로젝트 로직을 캡슐화 한 다음 ReactDOM.render 함수로 전달합니다.


src 폴더 안에 App.js라는 파일을 만들고 다음 코드를 입력합니다.


import React, { Component } from 'react';

class App extends Component {

  render(){
    return (
      <div>
        Hello World Again!
      </div>
    )
  }
}

export default App;

여기에서는 React.Component의 하위 클래스 인 JavaScript 클래스를 정의하여 React Component를 만들었습니다.


또한 JSX 요소를 반환하는 렌더링 함수를 정의했습니다. <div> 태그 내에 추가 JSX 코드를 배치 할 수 있습니다. 다음으로 src / index.js를 다음 코드로 업데이트하여 브라우저에 반영된 변경 사항을 확인합니다.


import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

먼저 App 컴포넌트를 가져옵니다. 그런 다음 다음과 같이 JSX 형식을 사용하여 App을 렌더링 합니다. <App />. 이는 JSX가 React DOM에 푸시 할 수 있는 요소로 컴파일 할 수 있도록 하기 위해 필요합니다.

변경 사항을 저장 한 후 브라우저가 올바른 메시지를 렌더링 하는지 확인하세요.


다음으로 스타일을 적용하는 방법을 살펴 보겠습니다.


Styling JSX Elements 


React 컴포넌트를 스타일링 하는 다양한 방법이 있습니다. 이 자습서에서 살펴볼 두 가지는 다음과 같습니다.


  • JSX inline styling
  • External Stylesheets

다음은 JSX 인라인 스타일을 구현하는 방법의 예입니다.


// src/App.js

render() {
  const headerStyle = {
    color: '#ff0000',
    textDecoration: 'underline'
  }
  return (
    <div>
      <h1 style={headerStyle}>Hello World Again!</h1>
    </div>
  )
}

React 스타일링은 일반 CSS와 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다. 예를 들어 headerStyle은 개체 리터럴입니다. 평소처럼 세미콜론을 사용할 수 없습니다. 또한 JavaScript 구문과 호환되도록 여러 CSS 선언이 변경되었습니다.

예를 들어, text-decoration 대신 textDecoration을 사용합니다. 기본적으로 대문자로 시작해야 하는 WebkitTransition과 같은 공급 업체 접두사를 제외한 모든 CSS 키에 대해 카멜 케이스를 사용합니다.


다음과 같이 스타일을 구현할 수도 있습니다.


// src/App.js

return (
  <div>
    <h1 style={{color:'#ff0000', textDecoration: 'underline'}}>Hello World Again!</h1>
  </div>
)

두 번째 방법은 외부 스타일 시트를 사용하는 것입니다. 기본적으로 외부 CSS 스타일 시트는 이미 지원됩니다. Sass와 같은 전처리기를 사용하려면 설명서를 참조하여 구성 방법을 찾으십시오.


src 폴더 안에 App.css라는 파일을 만들고 다음 코드를 입력합니다.


h1 {
  font-size: 4rem;
}

파일 맨 위에 있는 src / App.js에 다음 import 문을 추가합니다.


import './App.css';

저장 후 브라우저의 텍스트 콘텐츠 크기가 크게 변경되는 것을 볼 수 있습니다. 다음과 같은 CSS 클래스를 사용할 수도 있습니다.


.header-red {
  font-size: 4rem;
  color: #ff0000;
  text-decoration: underline;
}

다음과 같이 src / App.js를 업데이트합니다.


<h1 className="header-red">Hello World Again!</h1>

HTML의 클래스 속성은 예약 된 자바 스크립트 키워드이므로 사용할 수 없습니다. 대신 className을 사용합니다. 다음은 예상되는 출력입니다.


Styling in React 



이제 React 프로젝트에 스타일링을 추가하는 방법을 배웠으므로 계속해서 상태 비 저장 및 상태 저장 React 구성 요소에 대해 알아 보겠습니다.


Stateless vs Stateful Components 


Dumb 구성 요소라고도 하는 상태 비 저장 구성 요소는 정보를 표시하는 구성 요소입니다.

데이터를 조작하는 논리가 포함되어 있지 않습니다. 사용자로부터 이벤트를 수신 한 다음 처리를 위해 상위 컨테이너로 전달됩니다.


message-view.js 파일을 만들고 다음 예제 코드를 여기에 복사합니다. 다음은 멍청한 구성 요소의 완벽한 예입니다 (기술적으로는 정적 구성 요소에 가깝지만).


import React from 'react';

class MessageView extends React.Component {
  render() {
    return(
      <div className="message">
        <div className="field">
          <span className="label">From: </span>
          <span className="value">John Doe</span>
        </div>
        <div className="field">
          <span className="label">Status: </span>
          <span className="value"> Unread</span>
        </div>
        <div className="field content">
          <span className="label">Message: </span>
          <span className="value">Have a great day!</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

다음으로 다음 코드를 사용하여 src / App.css에 몇 가지 기본 스타일을 추가합니다.


body {
  background-color: #EDF2F7;
  color: #2D3748;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-size: 2rem;
}

.container {
  width: 800px;
  margin: 0 auto;
}

.message {
  background-color: #F7FAFC;
  width: 400px;
  margin-top: 20px;
  border-top: solid 2px #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.field{
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}

.label {
  font-weight: bold;
  font-size: 1rem;
  width: 6rem;
}

.value {
  color: #4A5568;
}

.content .value {
  font-style: italic;
}

마지막으로 src / App.js를 수정하여 전체 파일이 다음과 같이 보이도록 합니다.


import React, { Component } from 'react';

import './App.css';
import MessageView from './message-view';

class App extends Component {
  render(){
    return (
      <MessageView />
    )
  }
}

export default App;

지금까지 관련된 개념을 이미 설명 했으므로 코드는 매우 자명해야 합니다. 지금 브라우저를 살펴보면 다음과 같은 결과가 나타납니다.


Messages View 


React는 클래스 기반 및 함수 구성 요소를 모두 제공한다고 전에 언급했습니다. 다음과 같은 기능 구문을 사용하여 MessageView를 다시 작성할 수 있습니다.


import React from 'react';

export default function MessageView() {
  return (
    <div className="message">
      <div className="field">
        <span className="label">From: </span>
        <span className="value">John Doe</span>
      </div>
      <div className="field">
        <span className="label">Status: </span>
        <span className="value"> Unread</span>
      </div>
      <div className="field content">
        <span className="label">Message: </span>
        <span className="value">Have a great day!</span>
      </div>
    </div>
  );
}

구성 요소 가져 오기는 기능 구문에서 필요하지 않으므로 제거했습니다. 이 스타일은 처음에는 혼란스러울 수 있지만 이런 식으로 React 컴포넌트를 작성하는 것이 더 빠르다는 것을 금방 알게 될 것입니다.


또한 React hooks의 출현으로 이 스타일의 React 컴포넌트 작성이 점점 인기를 얻고 있습니다.


Passing Data via Props 


상태 비 저장 React 구성 요소를 성공적으로 만들었습니다. 하지만 상태 저장 구성 요소 또는 컨테이너와 제대로 통합되기 위해 수행해야 하는 작업이 조금 더 많기 때문에 완전하지는 않습니다.

현재 MessageView는 정적 데이터를 표시하고 있습니다. 입력 매개 변수를 수용 할 수 있도록 수정해야 합니다.

이 작업은 props라는 것을 사용하여 수행합니다. 부모 구성 요소에서 전달할 데이터입니다.


다음과 같이 MessageView 구성 요소를 변경하여 시작하십시오.


import React from 'react';

class MessageView extends React.Component {
  render() {
    const message = this.props.message;

    return(
      <div className="message">
        <div className="field">
          <span className="label">From: </span>
          <span className="value">{message.from}</span>
        </div>
        <div className="field">
          <span className="label">Status: </span>
          <span className="value">{message.status}</span>
        </div>
        <div className="field content">
          <span className="label">Message: </span>
          <span className="value">{message.content}</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

여기서 알아야 할 주요 사항은 메시지 변수를 정의하는 방법입니다. stateful 상위 구성 요소에서 전달되는 this.props.message 값을 할당합니다.

JSX에서 메시지 변수를 참조하여 페이지에 출력 할 수 있습니다.


이제 MessageView의 부모 구성 요소를 만들어 보겠습니다. 새 파일 message-list.js를 만들고 다음 코드를 추가합니다.


import React, { Component } from 'react';
import MessageView from './message-view';

class MessageList extends Component {
  state = {
    message: {
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    }
  }

  render() {
    return(
      <div className="container">
        <h1>List of Messages</h1>
        <MessageView message={this.state.message} />
      </div>
    )
  }
}

export default MessageList;

여기서는 상태를 사용하여 메시지가 포함 된 객체를 저장합니다. React의 마법의 일부는 상태 객체가 변경 될 때 구성 요소가 다시 렌더링 된다는 것입니다 (따라서 UI 업데이트).


그런 다음 JSX에서 상태 개체의 메시지 속성을 MessageView 구성 요소에 전달합니다.


마지막 단계는 상태 비 저장 MessageView 구성 요소와 달리 새로운 상태 저장 MessageList 구성 요소를 렌더링하도록 App 구성 요소를 업데이트하는 것입니다.


import React, { Component } from 'react';
import MessageList from './message-list';

import './App.css';

class App extends Component {
  render(){
    return (
      <MessageList />
    )
  }
}

export default App;

변경 사항을 저장 한 후 브라우저에서 결과를 확인하십시오.


Message List 


잠시 시간을 내어 무슨 일이 일어나고 있는지 이해하십시오. (stateful) MessageList 구성 요소에서 상태 객체를 선언하고 있습니다. 해당 객체의 메시지 속성에는 메시지가 포함됩니다.

렌더링 함수에서 props라는 것을 사용하여 해당 메시지를 (상태 비 저장) 자식 구성 요소에 전달할 수 있습니다.


(stateless) MessageView 구성 요소에서 this.props.message를 사용하여 메시지에 액세스 할 수 있습니다. 그런 다음이 값을 JSX에 전달하여 페이지에 렌더링 할 수 있습니다.


Prop Checking 


애플리케이션이 성장하고 데이터가 props로 앞뒤로 전달됨에 따라 구성 요소가 예상하는 데이터 유형을 수신하는지 확인하는 것이 유용합니다.


다행히 우리는 prop-types 패키지로 이것을 할 수 있습니다. 이 작업의 빠른 예를 보려면 다음과 같이 MessageView 구성 요소를 변경하십시오.



import React from 'react';
import PropTypes from 'prop-types';

class MessageView extends Component {
  // This stays the same
]

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

이로 인해 메시지 소품이 누락 된 경우 React 앱이 불평 할 것입니다. 또한 구성 요소가 객체 이외의 것을 수신하면 불평을 유발합니다.


다음과 같이 상위 구성 요소의 상태를 변경하여 이를 시도 할 수 있습니다.


state = {
  message: 'Not an object!'
}

브라우저로 돌아가서 콘솔을 엽니다. 콘솔에 다음이 기록 된 것을 볼 수 있습니다.


Warning: Failed prop type: Invalid prop `message` of type `string` supplied to `MessageView`, expected `object`.
    in MessageView (at message-list.js:13)
    in MessageList (at App.js:9)
    in App (at src/index.js:6)

Component Reuse 


이제 MessageView 인스턴스를 사용하여 여러 메시지를 표시하는 방법을 살펴 보겠습니다. 이것은 React가 빛을 발하기 시작하는 곳입니다. 코드 재사용을 믿을 수 없을 정도로 쉽게 만듭니다.


먼저 state.message를 배열로 변경하고 이름을 messages로 변경합니다. 그런 다음 JavaScript의 map 함수를 사용하여 각각 state.messages 배열의 메시지에 해당하는 MessageView 구성 요소의 여러 인스턴스를 생성합니다.


또한 id와 같은 고유 한 값으로 key라는 특수 속성을 채워야 합니다. React는 목록의 어떤 항목이 변경, 추가 또는 제거되었는지 추적하기 위해 이것이 필요합니다.


다음과 같이 MessageList 코드를 업데이트합니다.


class MessageList extends Component {
  state = {
    messages:  [
      {
        _id: 'd2504a54',
        from: 'John',
        content: 'The event will start next week',
        status: 'unread'
      },
      {
        _id: 'fc7cad74',
        from: 'Martha',
        content: 'I will be traveling soon',
        status: 'read'
      },
      {
        _id: '876ae642',
        from: 'Jacob',
        content: 'Talk later. Have a great day!',
        status: 'read'
      }
    ]
  }

  render() {
    const messageViews = this.state.messages.map(
      message => <MessageView key={message._id} message={message} />
    )

    return(
      <div className="container">
        <h1>List of Messages</h1>
        {messageViews}
      </div>
    )
  }
}

결과를 보려면 브라우저를 확인하십시오.


Messages Loop 


보시다시피 React를 사용하여 강력하고 복잡한 UI 인터페이스를 만들기 위해 빌딩 블록을 정의하는 것은 쉽습니다.


Refactor to Use React Hooks 


Hooks는 React의 최신 버전이지만 React 세계를 강타하고 있습니다. 간단히 말해서 React 함수 구성 요소를 가져 와서 상태 (및 기타 기능)를 추가 할 수 있습니다.


MessageView 구성 요소를 리팩토링하여 React 후크로 상태를 관리하는 함수 구성 요소로 만드는 방법으로 이 자습서를 마칠 것입니다. React v16.8 이상을 사용할 때만 가능합니다.


import React, { useState } from 'react';
import MessageView from './message-view';

export default function MessageList () {
  const initialValues = [
    {
      _id: 'd2504a54',
      from: 'John',
      content: 'The event will start next week',
      status: 'unread'
    },
    {
      _id: 'fc7cad74',
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    },
    {
      _id: '876ae642',
      from: 'Jacob',
      content: 'Talk later. Have a great day!',
      status: 'read'
    }
  ];

  const [messages] = useState(initialValues);
  const messageViews = messages.map(
    message => <MessageView key={message._id} message={message} />
  );

  return (
    <div className="container">
      <h1>List of Messages</h1>
      {messageViews}
    </div>
  );
}

위의 예에서는 상태 객체를 useState React 후크로 대체했습니다. 이름에서 알 수 있듯이 이를 통해 구성 요소의 상태를 관리 할 수 ​​있습니다.


후크를 사용하면 대형 프로젝트에서 작업 할 때 프롭 드릴링이라는 것을 피할 수 있습니다. 소품 드릴링은 깊이 중첩 된 구성 요소에 도달하기 위해 여러 구성 요소 (궁극적으로 해당 데이터가 필요 없음)를 통해 소품을 전달하는 것을 확인합니다.


MessageView 구성 요소를 함수 구성 요소로 변환 할 수도 있습니다.


import React from 'react';
import PropTypes from 'prop-types';

const MessageView = ({ message }) => {
  const { from, status, content } = message;

  return(
    <div className="message">
      <div className="field">
        <span className="label">From: </span>
        <span className="value">{from}</span>
      </div>
      <div className="field">
        <span className="label">Status: </span>
        <span className="value">{status}</span>
      </div>
      <div className="field content">
        <span className="label">Message: </span>
        <span className="value">{content}</span>
      </div>
    </div>
  );
};

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

이제 컴포넌트에서 메시지 소품을 받는 방법을 확인하십시오.


const MessageView = ({ message }) => {
  ...
}

이것은 배열 또는 객체에서 개별 항목을 추출하고 속기 구문을 사용하여 변수에 배치 할 수 있는 객체 분해라는 기술을 활용합니다.


여기서는 동일한 기술을 사용하여 메시지 객체에서 필요한 값을 가져오고 모든 것에 메시지 접두사를 붙이지 않도록 합니다.


const { from, status, content } = message;

이 기사에서 더 이상 React 후크에 대해 다루고 싶지는 않지만, 그들이 존재하고 React 커뮤니티에서 점점 인기를 얻고 있음을 알려드립니다.

후크에 대해 자세히 알아 보려면 React Hooks 시작 가이드를 읽어보세요.


Demo 


플레이 할 수 있는 라이브 데모는 다음과 같습니다.


https://codepen.io/SitePoint/pen/PoNXyrK