벨로퍼트님의 강좌를 보고 공부 하려고 합니다.

블로그 주소

React란?

  • Angular, Vue.js와 다르게 프레임워크가 아닌 라이브러리 입니다.

Router같은 기능이 기본적으로 포함되어 있지 않지만 대신 생태계가 엄청나기 때문에 다른
똑똑한 사람들이 만들어 놓은 라이브러리나 아니면 자신이 직접 만들어서 사용할 수 있습니다.

  • Virtual DOM의 선두주자 입니다.

Virtual DOM은 이름 그대로 가상의 DOM입니다. 코드를 수정하여 변화가 일어나면 실제 DOM에
새로운걸 넣는것이 아니라 가상DOM 에 일단 넣고 Git 마냥 기존의 DOM과 비교를 한 다음
변화가 일어난 곳에만 업데이트를 해줍니다.

  • Component를 집중적으로 사용합니다.

Component는 UI를 구성하는 개별적인 뷰 단위입니다. 쉽게 말하면 레고 마냥 자신이 원하는
모습을 만들기 위해 Component끼리 결합을 하여 만들어 집니다. Component가 이때 한번 쓰고
사라지는게 아니라 또 다른 필요한 부분에 쉽게 재사용이 가능합니다.

너무 많지만 여기까지만 하고 실제로 해보겠습니다.

create-react-app 설치하기

기본적으로 Node.js, 에디터가 깔려 있어야 합니다.

일단은 create-react-app을 설치합니다. 이름 그대로 리액트 앱을 만들어 주는 도구입니다.

npm i -g create-react-app

이제 자신이 진행할 프로젝트 폴더를 만들고 그 경로를 찾아간뒤 명령어를 씁니다.

create-react-app hello-react

설치가 완료 된후 다음과 같이 명령어를 씁니다.

cd hello-react
npm start

image.png

성공적으로 앱이 실행이 되었습니다.