React 시작하는 방법 – 초보자 가이드

React 시작하는 방법 – 초보자 가이드

 

React(React.js 또는 ReactJS라고도 함)는 UI 구성 요소 기반 사용자 인터페이스를 만들기 위한 무료 오픈 소스 프런트 엔드 JavaScript 프레임워크입니다.

React는 Meta(이전의 Facebook)와 개별 개발자 및 조직의 커뮤니티에서 유지 관리합니다.

2021년 스택 오버플로의 개발자 설문 조사에 따르면 React.js는 약 40.14%로 가장 일반적으로 사용되는 웹 프레임워크로 jQuery를 제치고 가장 원하는 것으로, 개발자 4명 중 1명이 사용하고 있습니다. React는 또한 8000명 이상의 업계 리더들이 사용하고 있습니다.

이 기사에서는 React를 배워야 하는 이유와 시작하는 방법을 알아봅니다.

왜 React를 배우는가?

React를 배워야 하는 이유는 여러 가지가 있지만 다음은 많은 React 전문가가 강조하는 가장 자주 언급되는 몇 가지 사항입니다.

React는 사용하기 쉽습니다.

저를 포함한 많은 사람들이 React의 단순성, 유연성, 성능, 유용성, 가상 DOM, 구성 요소 및 기타 여러 기능을 좋아합니다.

React로 작업하면 애플리케이션을 훨씬 더 빠르게 구축하고 유지 관리할 수 있는 간단하고 모듈화된 인프라 덕분에 개발자로서의 삶이 단순해집니다.

React 개발자에 대한 수요가 높습니다.

미국에서 React 개발자의 평균 연봉은 $120,000입니다. 많은 기업과 회사에서 매일 새로운 인재를 찾아야 하는 React를 사용합니다.

React 개발자를 배우거나 되는 것에 대해 주저하는 점이 있다면 재고해 보세요. 걱정할 필요가 없습니다. 현재 (원격에서도) 수천 개의 일자리가 열려 있기 때문에 React 개발자는 항상 일자리가 있을 것입니다.

React의 기초를 배우는 것은 어렵지 않습니다

이것은 완전히 초보자 코더로서 React를 배우는 것이 전문가로서 JavaScript를 배우는 것보다 의심할 여지 없이 더 오래 걸리기 때문에 다르게 해석될 수 있습니다. 하지만 내 말은 당신이 JavaScript의 기초를 완전히 이해하고 나면 React를 이해하는 것이 어렵지 않다는 것입니다.

또한 React를 사용하면 React 웹 앱 전체에서 간단한 기능을 재사용할 수 있습니다.

요약하자면, React는 배우기 비교적 간단하고 Github에서 많은 오픈 소스 프로젝트를 지원하는 대규모 커뮤니티를 보유하고 있으며 많은 직업 기회를 제공합니다.

React를 배우면 JavaScript를 더 잘 이해하는 데 도움이 되며 이는 경력 전반에 걸쳐 유용할 것입니다.

React는 JavaScript 프레임워크이므로 React의 흐름과 이해를 위해 특정 JavaScript 기본 사항을 이해하는 것이 중요합니다. 다음은 지도, 필터 및 기타 여러 기본적인 JavaScript 개념 및 메서드에 대한 자세한 기사입니다. 이것은 당신이 React를 더 빨리 배우는 데 도움이 될 것입니다.

React를 설치하는 방법

React를 설치하거나 React 프로젝트를 만드는 가장 좋은 방법은 다음을 사용하여 설치하는 것입니다. create-react-app. 이것은 대부분의 초보자가 어려움을 겪는 단계 중 하나이지만 이 가이드에서는 적절하고 성공적으로 시작하는 방법을 살펴보겠습니다.

이를 위해 터미널을 사용할 것입니다(내장된 터미널을 사용하거나 원하는 것을 다운로드할 수 있음). 한 가지 전제 조건은 NPM(또는 Yarn)이 필요하다는 것을 충분히 알고 PC에 Node.js를 설치하는 것입니다. 이 가이드에서는 NPM을 사용합니다.

PC에 Node가 설치되어 있는지 확인하려면 터미널/명령 프롬프트를 실행하고 다음을 입력하십시오. node -v 그리고 npm -v 보유하고 있는 버전을 확인합니다.

왜냐하면 create-react-app NPX가 설치되어 있어야 하므로 노드 버전이 v14.0.0 이상이고 NPM 버전이 v5.6 이상인지 확인해야 합니다.

이전 버전의 NPM이 있다고 가정하고 다음 명령을 사용하여 업데이트할 수 있습니다.

npm update -g

NPM을 파악했다면 이제 다음을 사용하여 React를 설치할 수 있습니다. create-react-app.

터미널 작업이 어렵다면 이 문서에서 초보자를 위한 명령줄 사용 방법을 확인할 수 있습니다.

Create-react-app이란 무엇입니까?

이름이 무엇을 하는지 설명하지만, create-react-app 정말 의미합니다.

React 앱을 수동으로 만드는 것은 복잡하고 시간이 많이 걸리지만 create-react-app 모든 구성 및 패키지 설치를 자동화하여 훨씬 쉽게 만듭니다.

create-react-app React에서 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 좋은 방법입니다.

수동으로 React 앱을 만드는 방법을 배우고 싶다면 create-react-app이 가이드를 확인할 수 있습니다.

React 애플리케이션을 만드는 방법

첫 번째 단계는 터미널/명령 프롬프트를 시작하고 React 애플리케이션을 저장할 폴더로 이동한 후 다음 명령을 실행하는 것입니다.

npx create-react-app my-app

메모: my-app 는 우리가 만들고 있는 응용 프로그램의 이름이지만 원하는 이름으로 변경할 수 있습니다.

설치 프로세스는 몇 분 정도 걸릴 수 있습니다. 완료되면 앱에 지정한 이름으로 작업 공간에 폴더가 표시되어야 합니다. 축하합니다!

React 애플리케이션을 실행하는 방법

이제 터미널로 돌아가서 가장 먼저 해야 할 일은 다음을 사용하여 앱이 설치된 디렉토리로 이동하는 것입니다. cd my-app. 그럼 드디어 실행 npm start localhost:3000에서 앱을 라이브로 보려면

다음과 같이 표시되어야 합니다.

디렉토리 구조

이 기사의 첫 번째 부분을 마쳤습니다. 이제 React 애플리케이션의 각 파일과 폴더의 의미와 기능을 알아보겠습니다. 이것은 초보자나 숙련된 React 개발자에게 매우 중요합니다.

새로 생성된 React 앱의 디렉토리 구조는 열 때 다음과 같습니다.

이제 이러한 폴더와 그 의미를 설명하는 것으로 시작하겠습니다.

node_modules 폴더

그만큼 node_modules 폴더에는 모든 종속성이 포함되어 있으며 이 폴더는 소스 제어를 설정할 때 무시됩니다. 하지만 주의할 점은 package.json 파일은 다음과 함께 작동합니다. node_modules 폴더에는 모든 종속성과 일부 스크립트 명령에 대한 정보가 포함되어 있기 때문입니다.

삭제하면 node_modules 폴더를 삭제하면 더 이상 종속성이 없기 때문에 응용 프로그램이 중단됩니다.

이러한 종속성을 다시 설치하려면 다음을 사용할 수 있습니다. npm install – 이것은 확인합니다 pakage.json 종속성 목록에 대한 파일을 찾은 다음 모두 설치하십시오. 이렇게 하면 무거운 코드를 공유하지 않고도 코드를 온라인으로 쉽게 푸시하거나 다른 사람과 코드를 공유할 수 있습니다. node_modules 폴더.

메모: 이것은 단지 create-react-app.

공용 폴더

대부분의 작업은 내부에서 수행되지만 src 폴더에는 HTML 파일과 같은 일부 정적 파일이 포함되어 있습니다. 예를 들어 웹 앱의 제목을 변경하고 Google 글꼴과 같은 CDN을 추가하는 등의 작업을 수행할 수 있습니다.

메모: 이 파일은 일반 HTML 파일이기 때문에 두려워하지 마십시오. 기억할 유일한 코드는 div 이랑 id root 전체 React 애플리케이션이 배치될 위치입니다.

.gitignore 폴더

이름에서 알 수 있듯이 소스 제어에서 무시할 파일과 폴더를 지정하는 파일입니다.

파일을 열면 다음을 포함하여 무시되는 파일 목록이 표시됩니다. node_modules 그리고 빌드 폴더. 특정 파일이나 폴더를 추가하기로 결정할 수 있습니다.

빌드 폴더

빌드 폴더는 지금은 볼 수 없지만 프로젝트를 빌드할 때 보게 되는 또 다른 폴더입니다.

이렇게 하면 Netlify와 같은 플랫폼에서 끌어서 놓기 옵션을 사용하여 호스팅하거나 배포할 수 있는 정적 자산의 프로덕션 준비 폴더가 생성됩니다.

src 폴더

지금까지 몇 가지 기본적인 폴더를 다루었지만 주요 관심사는 src 개발이 이루어지는 폴더입니다. 여기 무엇을 src 폴더는 다음과 같습니다.

기본 파일부터 시작하겠습니다. App.js, index.js, index.css그리고 App.css (지금은 다른 모든 파일을 삭제할 수 있습니다.)

앱.js

이것은 모든 구성 요소가 결국 만나는 곳입니다. 파일 이름은 중요하지 않지만 다른 개발자가 코드를 이해할 수 있도록 이 이름을 유지하는 것이 좋습니다.

index.js

이것은 응용 프로그램의 시작점입니다. 더 구체적으로 말하면 여기에서 root id ~로부터 index.html 파일 및 렌더링 App.js 전체 파일(구성 요소 및 페이지)이 만나는 곳입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
 ,
 document.getElementById('root')
);

App.css 및 index.css

둘 다 애플리케이션에 대한 스타일을 포함합니다. 그만큼 index.css 파일에는 전역 스타일이 포함되어 있으며 App.css 파일과 거의 동일하게 작동합니다. App.js 파일 – 그러나 CSS 파일을 사용할지 여부는 전적으로 우리에게 달려 있습니다. 시작하는 동안 하나를 삭제하고 하나의 CSS 파일만 사용하도록 선택할 수 있습니다.

JSX 이해하기

JSX는 HTML과 JavaScript를 함께 쉽게 작성하기 위해 React에서 사용되는 JavaScript Extension Syntax입니다.

React에서 코드를 작성하려면 다음을 사용해야 하기 때문에 시간이 오래 걸립니다. React.createElement 간단한 기능을 추가하더라도 매번 div.

위의 이미지는 JSX로 작성된 동일한 코드를 보여줍니다. React.createElement. 둘을 비교하면 어느 것이 더 쓰기 쉽고 이해하기 쉽고 관리하기 쉬운지 알 수 있습니다.

create-react-app JSX에서 JavaScript로의 변환을 위해 내부적으로 Babel을 사용하므로 Webpack으로 자신의 babel 구성을 구성하는 것에 대해 걱정할 필요가 없습니다.

JSX에서 해야 할 것과 하지 말아야 할 것

일부 버그가 방해가 되지 않도록 다음과 같은 중요한 세부 정보를 알고 있어야 합니다.

• 마크업은 일반적으로 한 줄의 코드 또는 블록 코드로 return 문 뒤에 배치됩니다.
• 모든 코드는 단일 태그로 래핑되어야 합니다. 이것은 수 있습니다 div내용이 없는 태그(<>) 또는 기타 태그입니다.

const App = () => {
 return (

JSX Title

This is first JSX Element!

This is another JSX Element

 );
};

이것은 일반 마크업에서 잘 작동하지만 React는 인접 요소가 상위 태그로 래핑되어야 하기 때문에 큰 오류가 발생합니다. 이것은 단순히 이 코드가 실행되려면 div, 섹션, 기사 등과 같은 상위 태그로 래핑되어야 함을 의미합니다.

const App = () => {
 return (

JSX Title

This is first JSX Element!

This is another JSX Element

 );
};

당신은 또한 사용할 수 있습니다 React.Fragment 요소.

개발자로서 이제 항상 코드에 주석을 추가하는 것이 표준이며 JSX도 예외는 아닙니다. 단축키 명령(Cmd + /(Mac) 또는 Ctrl + / 단축키를 사용하여 특정 주석을 추가하거나 제거할 수 있음)을 사용할 수 있습니다.

참고: JSX로 거의 모든 작업을 수행할 수 있습니다. 이 기사를 읽고 JSX 작동 방식에 대해 자세히 알아볼 수 있습니다.

요약하면 JSX는 React.createElement (component, props, ...children) 기능.

다음은?

이제 React를 시작하는 방법을 알았으므로 다음 단계는 제대로 배우고 기능을 이해하는 것입니다.

요즘에는 React 학습에 사용할 수 있는 훌륭한 리소스가 너무 많아 어떤 것이 최신이고 유용한지 판단하기 어렵습니다.

한 번에 여러 과정을 수강하려고 하는 대신 유용한 자습서를 찾아 완료하는 것이 가장 좋습니다. freeCodeCamp를 확인하십시오 2022년 무료 React 코스 또는 React 배우기 - 초보자를 위한 전체 과정.

결론

지금까지 이 기사에서 React가 무엇인지, React를 배워야 하는 이유, 시스템에 설치하는 방법을 배웠습니다. 또한 디렉토리 구조의 각 파일이 하는 일을 배웠습니다.

이 시점부터 React에 대해 배울 것이 많으며 학업을 계속하는 동안 행운을 빕니다. 이 기사가 마음에 드셨다면 저에게 커피를 사주시거나 트위터에서 나를 팔로우.

읽어 주셔서 감사합니다!