리액트란 무엇일까?

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리다.

사람들이 대부분 오해하고 있는데, 리액트는 프레임워크가 아니라 라이브러리이다.

우리가 알고있는 여러 javascript 프레임워크들과 확실히 다르다.

사람들이 오해하는 또 다른 내용은 React는 웹 개발에 모든 것을 제공한다고 알고 있는데, 사실 React는 UI를 조금 더 효율적으로 구조적으로 작성할 수 있게 해주는 UI라이브러리이다.

React 입문하기

우리가 라이브러리로 개발을 하기 위해선 우리에게 필요한 라우팅, 빌드 환경 구성, 분석등과 같은 세팅을 직접 구성해야 한다는 점이 있다.

예전에는 개인들이 내는 Bolierplate 리액트에 의존해서 개발을 했다고 하는데, 그에 따른 각각 다른 환경에 불편함을 느낀 개발자들이 있었고, 그 만큼 진입 장벽이 높았던 것도 사실이었다. 하지만 리액트를 창시한 페이스북에서는 진입 장벽을 낮추기위해 Create React App이라는 것을 제공하고 있다.

Create-React-App

Create-React-App을 이용해서 우리는 하나로 통합된 패키지의 개발 환경을 다운받을 수 있게 된다.

Create-React-App을 사용하려면 npm환경에서 터미널로

npm create-react-app app-name

으로 프로젝트를 생성하면 아래와 같은 것들이 자동적으로 구성이 된다.

그러면 자동으로

아래와 같이 많은 파일들이 생성이 되는 것일 확인할 수 있게 된다.

우리가 리액트는 UI를 자동으로 업데이트시켜주는 *_UI 라이브러리 *_라고 했었다.

그럼 그 리액트가 어떻게 UI를 관리하는지 확인해보자.

React는 어떻게 돌아갈까?

npm create-react-app app-name

으로 프로젝트를 생성한 뒤 index.html 파일에 들어가보면 위와 같은 코드가 존재하는데,

이 부분을 유심히 봐보자.

태그로 따지면 <body> </body>에 있는 유일한 태그인 <div></div> 태그에서 root라는 아이디로 설정이 되어있고, index.js로 들어가면

root라는 엘리먼트 요소를 가져와 ReactDom이라는 가상 돔에 의해서 관리가 된다.

다음에 배우게 될 내용이지만 React는 가상 돔을 이용해서 HTML 태그를 root라는 <div></div> 태그 내부에 꽂아 넣는다는 느낌으로 진행이 된다.

저작자표시 동일조건

'📺 Front End > - React, Next.js' 카테고리의 다른 글

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (2) 부제 :: Broswer History API를 사용해서 페이지 라우팅 하기 (0)	2020.07.20
[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (1) 부제 :: Single Page Application이 무엇이고 어떻게 리액트에서 사용할까? (2)	2020.07.20
[리액트 분석하기] 리액트의 핵심 JSX에 대해 알아보자. (부제 :: 리액트에서는 JSX를 어떻게 이용할까?) (0)	2020.07.20
[리액트 분석하기] Create-React-App으로 리액트 개발 환경을 구축해보자. (0)	2020.07.20
[리액트 분석하기] 우리는 왜 자바스크립트 라이브러리나 프레임워크를 이용해야 할까? (0)	2020.07.19

Wonit

[리액트 분석하기] React를 분석해보자. (부제 :: create-react-app에 대해 분석해보자)

리액트란 무엇일까?

React 입문하기

Create-React-App

React는 어떻게 돌아갈까?

'📺 Front End > - React, Next.js' 카테고리의 다른 글

댓글

티스토리툴바

[리액트 분석하기] React를 분석해보자. (부제 :: create-react-app에 대해 분석해보자)

리액트란 무엇일까?

React 입문하기

Create-React-App

React는 어떻게 돌아갈까?

'📺 Front End > - React, Next.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바