[React 기본] 1. 리액트의 핵심과 환경 구축

 

 

 

react

 

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

 

 

REACT

---

 

REACT란?

META(facebook)에서 개발한 오픈 소스 자바스크립트 라이브러리로,

 

프론트엔드 라이브러리이다.

 

SPA (Single Page Application)를 전제로 하고 있기 때문에 리렌더링이 잦은 최근의 웹 생태계에서 빠른 퍼포먼스를 내는 것이 가능하다.

 

 

 

 

---

React의 핵심 기능

리액트의 핵심 기능이라고 하면, 바로 사용자 정의 태그 (컴포넌트)를 만드는 것이라고 할 수 있다.

 

"component (컴포넌트)"를 만듬으로서 타인에게 코드를 공유할 수도 있고, 받을 수도 있으며 개발의 영역이 확대되었다.

 

 

 

 

---

환경 구축하기

기본적으로 node.js 환경에서 작동하기 때문에 node.js를 먼저 설치해주어야 한다.

 

https://nodejs.org/en/

Node.js

 

 

개발환경에는 여러가지가 존재하나,

 

우리는 리액트의 개발환경을 세팅해주는 create-react-app 라이브러리를 사용할 것이다.

 

https://create-react-app.dev/

Create React App

 

해당 라이브러리의 사용방법은 아주 간단하다. 

 

node.js가 설치된 환경에서 터미널에 해당 코드를 입력해준다.

 

 

여기서의 "my_react_app"은 우리가 작업을 진행할 프로젝트의 이름이며, 현재 열려있는 폴더에 작업환경을 세팅하고 싶다면 " . "을 입력해준다.

 

 

 

프로젝트 파일 설명

react 개발환경이 모두 조성되었다면 파일 트리를 봐보자

 

다음과 같은 파일트리가 만들어졌을 것이다. 다음 파일들의 대략적인 용도에 대해 알아보자.

 

 

 

라이브러리의 코드를 보관하는 곳이다. 일반적인 경우 이 곳을 건들일은 별로 없다.

 

 

static 파일들이 들어있는 곳이다. 

대표적으로 SPA의 대표적인 페이지가 되는 index.html이 들어있는 곳이기도 하다.

이미지 파일등 static 파일에 대한 관리를 이곳에서 진행한다.

 

 

대부분 우리가 코드를 짜게될 공간이다. 보통 App.js가 메인이 된다.

 

 

git에 관한 내용이나, 프로젝트 정보가 들어있는 파일이다.

 

 

---

초기(견본) React의 구조

 

위의 코드를 터미널에 입력해 react를 구동시켜보자.

 

다음과 같은 웹페이지가 나타나는 것을 볼 수 있다.

 

 

 

리액트의 파일구조는 다음과 같이 조성되어 있다.

 

pubilc에 있는 index.html이 가장 메인인 페이지가 되며, 이후 src폴더로 넘어와 

 

index.js => App.js의 구조를 가진다.

 

index.js에서 보이는 App.js의 위치

 

우리가 보고 있는 리액트의 마크는 App.js에 들어있는 코드들이며 해당 코드를 지우고 "Hello, React!" 을 입력한다면 화면이 다음과 같이 바뀌는 것을 볼 수 있다.

 

App.js의 코드 변경하기

 

 

코드에 따라 바뀌는 html

 

따라서 우리는 App.js를 바꿈으로서 프론트엔드를 구성할 것이고,

 

router와 같은 개념들은 기본적인 학습이 끝난 후 다뤄보도록 하겠다.