React 개념을 배우고 React로 첫 번째 앱 만들기

이 글에서 우리는 React가 무엇인지 그리고 왜 React인지 배울 것입니다. 또한 첫 번째 React 애플리케이션을 만들 것입니다.

반응이란 무엇입니까?

React는 Facebook에서 만들고 프런트 엔드 개발을 위해 2003년 5월에 출시한 JavaScript 라이브러리입니다.
프론트엔드 개발은 HTML, CSS, 자바스크립트로 구성됩니다. 프런트 엔드 개발자로서 웹 사이트나 웹 앱이 더 대화형일 때(움직이는 부분이 많을 때) HTML, CSS 및 JavaScript를 사용하는 프런트 엔드가 매우 어렵다는 것을 쉽게 알 수 있습니다. 결국 Facebook 개발자는 이러한 어려움을 관리할 수 있는 더 나은 방법이 있어야 한다고 결정했고 그때 React가 프런트 엔드 개발을 더 쉽고 빠르게 만들기 위해 JavaScript 라이브러리로 만들어졌습니다.

왜 반응하는가?

인터랙티브 웹사이트는 변경이 발생할 때마다 DOM(Document Object Model)을 업데이트해야 합니다. DOM을 조작하는 다른 라이브러리와 비교하여 React는 변경된 웹 사이트 부분을 업데이트할 수 있는 Virtual DOM(실제 DOM의 경량 사본)을 사용하며 이는 업데이트 속도를 높입니다.

반응 사용 방법

웹 사이트에 반응을 추가하거나 반응 앱을 만드는 두 가지 방법으로 반응을 사용할 수 있습니다.

웹사이트에 React 추가하기

React can be added to a website without any special tools and installations. But before that, we have to include the React library as two script tags to the head of the HTML Document

<script src="https://unpkg.com/react@16/umd/react.development.js" >crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react->dom.development.js" crossorigin></script> 

Next, we need to add another script, to enable the use of JSX.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"</script> 

반응 앱 만들기

Facebook has created a tool called Create React App that makes it easy to set up a React project with a command!

• Now, we will be creating our first react app called my-app.

• To get started, make sure you have a recent version of Node installed on your machine.

• After the installation of the node, Run the command below in your terminal with the path you want to create the app.

npx create-react-app my-app

• After the execution of this command, this will install all the required dependencies and a directory name my-app will be created in the path you run the command. Change the directory to the my-app by running the command below in the terminal.

cd my-app

• Run the app with this command.

npm start

• Start the app on localhost:3000 in any browser. This is the default output of our project in the browser:

리액트 프로젝트 구조

코드 편집기를 사용하여 프로젝트를 열어 프로젝트의 구조를 살펴보겠습니다.

이제 리액트 앱을 생성한 후의 프로젝트 구조입니다. 기본적으로 여기에는 두 개의 디렉토리public 및 src, 앱 실행 방법 및 앱에 대한 기타 정보가 포함된 ReadMe.md 파일이 포함됩니다. 또한 설치된 종속성을 포함하는 package,json 및 package-lock.json 파일도 포함합니다.


public 폴더에는 응용 프로그램이 클라이언트에 표시되는 방식과 관련된 파일이 포함되어 있으며 그 중 가장 중요한 파일은 페이지의 HTML 템플릿인 index.html 입니다.


src 폴더에는 번들 파일로 컴파일되어 index.html에 삽입될 모든 JavaScript, CSS 및 이미지 파일이 포함되어 있습니다.



Create React App이 생성될 때 함께 제공되는 src 폴더에 다른 파일이 있지만 아래 두 파일이 유일하게 중요한 파일입니다.

index.js: 이 파일은 응용 프로그램의 진입점입니다. index.js 파일에서 ReactDOM.render()라는 메서드는 HTML에서 id="root"가 있는 요소를 찾고 해당 요소 안에 React 애플리케이션을 추가하는 데 사용됩니다.

App.js: 이 파일은 출력에서 ​​볼 수 있는 React 로고 이미지와 기본 텍스트를 포함하는 DOM에 렌더링될 주요 구성 요소입니다.

React App은 어떻게 컴파일됩니까?

React는 file loader를 사용합니다. Create React App의 경우 Webpack을 사용하여 설정합니다.
Webpack은 함께 "번들"해야 하는 여러 파일의 내용을 포함하는 "번들"파일을 생성하고 모두 단일 파일에 함께 추가되고 컴파일을 위해 index.html 파일에 삽입됩니다.

참고 : Webpack은 src 디렉토리에서 모든 CSS, JavaScript 및 이미지를 검색하고 번들을 생성하므로 Create React App의 경우 항상 src 폴더에 있어야 합니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 언제든지 내 이메일 뉴스레터를 구독하고 연결하세요.

GitHub