[React] 리액트 맛보기

 

리액트는 facebook.com의 UI를 더 잘 만들기위해서 페이스북에서 만든 자바스크립트 UI 라이브러리이다.

사용자 정의 태그를 만들어주는 여러 기술이 있는데 리액트도 이런 기술 중 하나이다.

 

리액트에서는 사용자 정의해서 태그를 만드는 것을 "컴포넌트"라고 칭한다.

 

이렇게 컴포넌트를 작성하면 가독성을 높일 수 있다.

그리고 서브페이지가 있다면 그 페이지에서도 컴포넌트를 가져다 쓸 수 있다. 한 컴포넌트를 개선, 수정하면 해당 컴포넌트를 사용하는 모든 태그들에서 동시에, 실시간으로 반영이 된다.

1. 가독성

2. 재사용성

3. 유지보수

 

나름대로 요약하자면 조각기능, 조각html 인 것 같다.

 

웹 사이트는 매우 빠르게 복잡해진다. 정보가 조금만 증가해도 정보를 표현하는 html 태그는 기하급수적으로 늘어난다.

이것이 리액트가 필요한 이유이다.

 

 

⚙ 개발환경 setting

- 리액트 홈페이지

https://ko.reactjs.org/

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

 

- 이 사이트에서 시작하기를 누르면 온라인 상에서 웹페이지를 만들어볼 수 있는 환경도 들어갈 수 있다.

예를 들면 codesandbox!

 

- 이미 가지고 있는 웹 사이트에 부분적으로 리액트 기능을 추가할 수 있는 옵션이다.

 

- tool chains은 리액트로 앱을 개발할 때 목표가 무엇인지에 따라서 필요한 여러가지 개발환경, 도구를 모아서 한 번에 제공해주는 것이다.

어떻게 하는지 배워보세요. 를 클릭하면 추천 툴체인을 볼 수 있다. 

여기서 Create React App을 눌러 상세페이지로 들어간다. 여기서 Create React App 자체가 앱 이름이다.

이런 페이지가 나오면 한 번 더 Create React App을 누른다. 그럼 앱의 소스코드가 보관된 Github 사이트가 보인다.

 

우리는 crate-react-app 을 내 컴퓨터에 깔 것인데 이 떄 npm이라는 프로그램이 필요하다.

npm이란 node.js라는 기술을 이용해서 만들어진 앱들이 있는데 이런 앱들을 명령어 환경에서 쉽게 설치할 수 있도록 도와주는 도구이다.

 

node.js 계의  앱스토어 같은 소프트웨어이다.

 

순서

1. npm 설치

2. create react app 앱 설치

3. create react app을 이용해서 개발할 수 있는 개발 환경 완성하기