<Reactjs> 프로젝트 만들기

리액트란 우선 간단히 무엇인지 알고 넘어가자

리액트는 페이스북에서 제공해주는 프론트엔드 "라이브러리" 이다.

또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다.

 

리액트를 왜 사용하는가?

사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다. 그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다.리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다. 어느정도 규모있는 프로젝트를 진행하다보면 위의 사진과 같이 복잡한 관계를 가지게 된다. 

 

 

리액트는 업데이트가 필요한 UI를 메모리에 있는 가상의 돔에 뿌려준뒤 실제 브라우저에서 보여지고 있는 돔과 비교하여 차이점을 감지한 뒤에 실제 돔에다가 PATCH를 해준다. 즉 차이를 감지해서 필요한 변화를 반영시켜준다.  이를 통해서 리액트는 정말 필요한 변화만 업데이트를 시키면서 빠른 성능을 지켜낼수 있게 되었다.

 

리액트를 사용하기 위해선 그전에 Nodejs를 필수적으로 설치해줘야 하는데 

Node.js는 크롬 V8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임환경으로서 

웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다.

리액트 프로젝트 개발할 때 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치가 필요하고 주요 도구들에는 바벨(Babel), 웹팩(webpack) 이 있다.

 

NodeJs 를 설치했으면 에디터 프로그램 혹은 커맨드창에서 프로젝트를 생성해줄 수가 있다. 참고로 yarn 이라는 자바스크립트 패키지 매니저가 있는데 npm으로도 충분히 기능을 수행할 수 있기 때문에 필요하다고 느끼면 깔아서 yarn을 이용해주면 되겠다.

 

npx create-react-app

 

 

 

 

 

 

dir 명령어를 통해  정상적으로 설치가 되었는지 확인한뒤에

 

 

 

 

본인이 만들어준 패키지로 경로를 이동한뒤에 

npm start 

를 입력해주면 localhost:3000 url 과 함꼐 기본페이지가 정상적으로 실행되는 것을 볼수 있다.

 

 

 

성공!!><