분류 Reactjs

React강좌 - 1 - React 시작하기 (2019 판)

컨텐츠 정보

  • 조회 393 (작성일 )

본문

React가 나온 이래로 많은 부분이 변경되었으며 지금은 React 싸움에 뛰어들 때가 있습니다. React은 성숙하며 Facebook, Instagram, Airbnb, Uber와 같은 장소에서 웹 전반에 걸쳐 사용되었습니다. 


https://scotch.io/starters/react/getting-started-with-react-2019-edition#toc-recommended-knowledge-prerequisites- 


React 란 무엇입니까? 


React는 Facebook에서 제작 한 UI 라이브러리입니다. React를 사용하면 프론트 엔드 사이트와 앱을 논리적으로 생각할 수 있습니다.


우리가 꿈꾸는 프로젝트를 만드는 것은 또한 정말 재미 있고 빠른 방법입니다! 


React를 사용하면 다음과 같은 앱을 제작할 수 있습니다.


  • 신속하게 만들 수 있습니다.
  • 이해하기 쉽습니다.
  • 우리가 논리적으로 데이터의 흐름을 볼 수 있게 하십시오.
  • 소규모 팀과 대규모 팀으로 잘 확장하십시오.
  • 데스크톱에서 모바일 앱으로 지식 이전

React를 사용하면 대화식 UI를 선언적으로 구현할 수 있습니다. 가장 큰 능력 중 하나는 데이터가 변경 될 때마다 UI를 자동으로 효율적으로 업데이트 할 수 있는 방법입니다.


이 React Starter에서는 React의 모든 종소리와 휘슬을 보겠습니다. 우리는 앱을 제작하고 많은 실제 기술을 배웁니다. 이 Starter는 깔끔하고 선형적인 경로에서 처음부터 React를 배우고 자하는 모든 이를 위한 것입니다. 따라 가면 React에서 건물을 시작하는 데 필요한 모든 React 지식을 얻게 됩니다.


권장 지식 (선수 과목) 


Building React 어플리케이션은 기초 지식이 거의 필요하지 않습니다. 이것은 큰 이점 중 하나입니다! HTML / CSS / JS 배경에서 나온다면 React로 시작하고 실행하는 것은 매우 쉽습니다.


다음과 같이 하는 것이 좋습니다.

  • HTML 및 CSS에 대한 지식
  • JavaScript 및 ES6에 대한 지식
  • DOM에 대한 지식
  • Node & npm에 대한 지식


앞으로의 기사에서 우리는 전제 지식에 대해 심도 있게 다룰 것임을 주목하십시오. 이 첫 번째 시작 기사에서는 React에서 어떻게 일할 수 있는지 보기 시작합니다. 그러면 우리는 한 걸음 물러서서 전제 조건을 더 살펴볼 수 있습니다.


빠르게 React 사용하기 


프로젝트에서 React를 사용하는 방법에는 여러 가지가 있습니다. 이것이 React의 주요 이점 중 하나입니다. 

React를 사용하는 두 가지 주요 방법은 다음과 같습니다.

  • 이미 존재하는 웹 사이트에 React를 추가하십시오
  • React를 사용하여 전체 단일 페이지 응용 프로그램 (SPA)


우리는 다음 기사에서 React를 사용하는 여러 가지 방법을 살펴 보겠습니다. 이 기사에서 우리를 빠르게 실행시키기 위해 우리는 CodePen을 사용할 것입니다. CodePen은 브라우저에서 바로 HTML / CSS / JS로 쉽게 놀 수 있는 온라인 코딩 놀이터입니다. 우리는 모든 설치 세부 사항을 아직 보고 싶지 않기 때문에 첫 번째 기사에 이 내용을 사용할 것입니다.


다음 몇 가지 기사를 통해 CLI, create-react-app 등 React를 사용할 수 있는 모든 방법을 살펴볼 수 있습니다.


코드 펜 설정 


필자는 이 기사에서 사용할 CodePen을 만들었습니다.


React Starter CodePen 


이 CodePen을 열면 다음과 같은 페이지로 인사드립니다 :


s_AB39485B5F79BDEFB0B9D4E40F24BE83121DF29B10E636D6F6CA029A2BF7C23B_1547831793347_9zjFdpU.png 


참고 : 편집기 상자는 상단 또는 측면에 있을 수 있습니다. 나는 왼쪽에 있는 것을 좋아한다. 보기 변경 단추로 이를 변경할 수 있습니다.


이 초보자 용 CodePen을 만드는 단계 


명확하게 하기 위해이 React Starter CodePen을 만드는 데 필요한 모든 것을 알려 드리려고 합니다. 3 단계로 빠르게 진행되었습니다 ( "Create a CodePen"단계를 계산하지 않은 경우 2 단계).

  1. 새 CodePen 만들기
  2. react 및 react-dom 스크립트 추가 (JS 편집기의 설정 아이콘 클릭)
  3. 우리가 ES6 코드를 사용하게 될 것이므로 JS 프로세서를 Babel로 변경하고 Babel은 코드를 ES5로 변경합니다.


React의 주요 핵심은 react.js 스크립트에서 찾을 수 있지만 브라우저에서 React로 작업하는 데 필요한 것은 react-dom.js에 있습니다. React는 브라우저 이외의 다른 장소에서 사용할 수 있기 때문에 이 둘은 분리되어 있습니다. 예를 보려면 React Native을 참조하십시오.


이것이 우리가 이 시동기 CodePen을 만든 방법입니다. JS 설정 팝업은 다음과 같아야 합니다.


z712iacrg3vfwedbgbha.png 


초소형 React 앱 


React를 어떻게 합니까?


React는 HTML div를 인수하고 JavaScript를 삽입하여 작동합니다. React가 멋진 자바 스크립트를 사이트의 이 섹션에 삽입합니다.


HTML div 추가하기 


HTML div를 만들어야 React로 작업 할 수 있습니다. HTML 패널에서 root 또는 app이라는 div를 만듭니다. React 응용 프로그램이 실행되는 주요 div이므로 React 환경에서 루트 또는 응용 프로그램의 이름을 지정하는 것이 표준입니다.


CodePen의 HTML 섹션에 다음을 추가하십시오.


<div id="root"></div>

그게 우리가 HTML에서 필요로 하는 전부입니다!


React 요소 


이제 목표로 할 수 있는 div가 생겼으므로 JavaScript와 React 코드를 작성해 보겠습니다 


더 이상 HTML / CSS 편집기를 필요로 하지 않으므로 HTML / CSS 편집기를 자유롭게 축소하십시오.


JavaScript 섹션에서 다음을 작성하십시오.


ReactDOM.render(
  <h1>I AM HERE!</h1>,
  document.getElementById('root')
);

이제 다음과 같은 모양이 생깁니다.


s_AB39485B5F79BDEFB0B9D4E40F24BE83121DF29B10E636D6F6CA029A2BF7C23B_1547834162330_Rkoupi0.png 


react.js 및 react-dom.js 스크립트를 포함함으로써 이제 React 및 ReactDOM의 JavaScript 객체에 액세스 할 수 있게 되었습니다.


ReactDOM.render()는 두 개의 매개 변수를 사용합니다.

  • 요소 (또는 곧 보게 될 구성 요소)
  • React가 삽입 할 HTML 요소

React에서 데이터 


이제는 이 앱이 너무 유용하지 않습니다. 왜냐하면 I AM HERE고 말하는 사이트를 항상 갖고 있는 것은 아니기 때문입니다.


데이터를 가져 와서 React 앱에 추가하는 방법을 알아 보겠습니다.


자바 스크립트에서 message라는 변수를 만들어 다음과 같이 표시해 보겠습니다.


const message = 'i am here to save the day!';

이제 ReactDOM.render에 표시 할 수 있습니다.


const message = 'i am here to save the day!';

ReactDOM.render(
  <h1>my message is: {message}</h1>,
  document.getElementById('root')
);

결과는...


s_AB39485B5F79BDEFB0B9D4E40F24BE83121DF29B10E636D6F6CA029A2BF7C23B_1547836100375_CvRklLw.png 


다음은 귀하가 살펴볼 수 있는 완성 된 데모입니다.


https://codepen.io/chrisoncode/pen/MZMzVX