[React] 리액트 시작하기, 설치하기 ep.00

리액트를 시작하기전, 먼저 리액트가 무엇인가 알아보고자 한다.

리액트란 ? 웹프레임 워크중 하나로, 자바스크립트에서 사용할 수 있는 라이브러리이다.

페이스북에서 효율적이고 편리한 UI를 만들기 위하여 만들었다고 한다.

 

리액트를 시작할때 등장하는 단어들을 간단히 정리해 보겠다.

[Component]

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드블록이다.

컴포넌트는 자체적으로 상태(state)와 속성(props)을 가질 수 있으며, 화면에 표시될 내용과 동작을 정의하는 역할을 한다,

리액트는 작고 재사용 가능한 컴포넌트를 조합하여 구성된다. 예를들어 버튼, 목록 등의 요소들은 각각 개별적인 컴포넌트로 구현할 수 있다.

 

[Rendering]

렌더링은 리갱트 컴포넌트의 'render()' 메서드가 호출되고, 해당 컴포넌트의 가상 돔 표현을 생성한다.

가상돔(Virtual DOM)은 컴포넌트의 현재 상태와 속성에 기반하여 표시할 내용을 나타낸다.

 

[Virtual DOM]

리액트의 가장 큰 속성은, 가상돔을 사용한다는 점이다. 

돔(DOM)이란 웹페이지의 구조화된 표현을 제공하는 프로그래밍 인터페이스이다. 

DOM을 사용하여 웹페이지의 구조와 내용을 동적으로 조작할 수 있다.

 

웹 브라우저에서 DOM에 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 한다. 이과정에서 시간이 소요 되기 때문에, 가상 돔을 사용하여 비용을 효율적이게 할 수 있다.

 

Virtual DOM은 실제 DOM에 접근하여 조작하는 대신, 해당 절차를 걸친다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.

 

이러한 절차로, 시간적 비용을 줄일 수 있다. 단, 적절한 곳에 사용해야 최적화 할 수 있다는 점을 알아야한다.

 

작업 환경 세팅

리액트를 시작하기전, 몇가지 프로그램 설치 절차를 거쳐야 한다.

 

1. 노드 설치하기 

https://nodejs.org/ko

Node.js

해당 사이트에 들어가서, 각자의 환경에 맞게 설치해주면 된다.

node를 설치하면 패키지 매니저 도구인 npm이 설치된다. 

 

2. Visual Studio Code 설치하기

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

마찬가지로 자신의 환경에 맞게 설치하여 주면 된다.

사실 리액트를 시작하는 단계라면 이미 javascript를 사용해본 경험이 있을 것이기 때문에.. Visual Studio Code설치는 되어 있는 상황일 것이다. 

VS Code의 패키지들은 자신의 편의에 맞게 설치하여 사용하면 된다. (알려주고 싶지만 . . . 나도 이것저것 설치해서 뭐가 뭔지 잘 모르겠다.. ㅠㅠ)

 

아무튼 이제 리액트를 본격적으로 시작해 보겠다.

리액트 시작하기

!!작성자는 윈도우 환경 임을 주의해라.. !! 

VScode 에서 폴더를 열어 리액트가 생성될 공간을 정한다.

상다의 Terminal (터미널)을 클릭하여 new terminal 을 열어준다.

Git bash(깔아야함..) 터미널에서 npm create-react-app 프로젝트명 명령어를 입력해야 하는데...

 

어떤 이유에서인진 나는 저렇게 하면 프로젝트가 생성되지 않고, npx create-react-app 프로젝트명 명령어를 사용해야한다.

npm create-react-app 이 안된다면 나처럼 npx로 해보길 바란다.

$ npx create-react-app react-study

프로젝트가 모두 생성되었으면 리액트를 시작할 준비를 마친것이다.

터미널에서 cd 프로젝트명 명령어를 통하여 해당 디렉토리에 들어가고 npm start 를 입력하보면, 리액트 창이 생기면서 리액트 아이콘이 있는 페이지가 나타날 것이다.

$cd react-study
npm start

 

리액트 시작하기는 여기서 마치겠다.

다음 게시글을 통해 다음단계로 넘어가보도록 하겠다.

 

출처:

리액트를 다루는 기술 - 김민준 

리액트 공식 문서