[React] React 시작하기

What is React?

ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React는 Facebook에서 만든 Frontend 용 javascript 라이브러리이다. 

공식 사이트에는 "사용자 인터페이스를 만들기 위한 javascript 라이브러리" 라고 기술되어있다. 

SPA (Single Page Application) 에 대한 관심과 함께 인기를 끌고 Redux, create-react-app 등의 사용이 보편화되며 실질적으로는 library 보다는 Framework으로서 사용되고 있다. 

 

Why React?

• 현재 시점에서 가장 많은 기업들에서 web 어플리케이션을 만드는데 사용하는 Web framework이다.
• 페이스북이 프로젝트를 관리하며 커뮤니티가 크다는 점이 장점이다. (내가 할 질문들에 대한 답은 이미 인터넷에 있다)
• 대부분 javascript 문법이므로 활용성이 좋다. ( 물론 JSX의 새로운 문법을 일부 배워야 한다)

2020.stateofjs.com/en-US/technologies/front-end-frameworks/

State of JS 2020: Front-end Frameworks

위 사이트에서 Javascipt 관련 기술들의 2020 현황을 볼 수 있다.

Satisfaction과 Interest 에서는 Svelte와 Vue가 강력하게 치고 올라오고 있긴 하지만 

실제 사용측면에서 React는 그야말로 압도적인 비중을 차지하고 있다. 

 

다른 Framework 대비 장점 등은 공부를 더 진행해가며 알아갈 수 있을 것 같다.

 

create-react-app

• React는 최신 Javascript 를 사용하기 때문에 webpack, babel등을 다운로드하고 컴파일하는 과정이 필요하다.
• create-react-app 를 쓰면 command 하나로 react 개발 환경을 빠르게 setup 할 수 있다.

npx create-react-app
create-react-app appName

• 완료되면 위와같이 폴더 구조와 소스코드들이 생성된다.
• public에는 index.html 과 함께 sample page의 fabicon.icon 등이 들어있고 src 에는 js, css 파일들이 들어있다.
• pacakge.json에는 library dependency, 배포버전 등이 정의되어있고 node_modules는 babel,webpack등 다운로드한 node module들이 들어있다. node_modules 폴더의 경우 npm으로 다시 다운받으면 되기 때문애 git에 올릴때는 .gitignore에 넣어주는것이 좋다.
• 터미널에 npm start 를 입력하면 local host 또는 지역 ip를 통해 현재상태의 앱을 개발중에 확인 할 수 있다.

 

이렇게 접속 가능한 경로가 표시된다.