CodePen으로 ReactJS 공부하기

1. ReactJS 란

RejectJS는 페이스북에서 공개한 유저 인터페이스(UI)를 위한 자바스크립트 라이브러리임

페이스북, 인스타그램, 야후, 아틀라시안, GitHub의 atom등 커다란 서비스에서 ReactJS를 사용하고 있음.

 

ReactJS의 특징

1) 유저인터페이스(UI)를 위한 라이브러리

2) 가상DOM 사용

3) 단방향 데이터 흐름 지향

 

2. ReactJS 프로젝트 생성하기

- ReactJS의 개발환경 소개

- CodePen으로 간단하게 ReactJS 프로젝트 생성하는 방법

- 실제 서비스로 제공될 수 있는 방법인 create-react-app을 사용하여 ReactJS 프로젝트를 생성하는 방법

 

- ReactJS의 개발환경

ReactJS는JSX, ES6등을 사용하기 때문에(필수는 아니지만 권장) 크게 세가지의 개발환경을 설정함

그러나 CodePen이나 create-react-app을 사용하면 복잡한 개발환경 설정없이 ReactJS프로젝트를 생성할 수 있음.

 

• Package Manager : Package Manager는 yarn이나 npm등이 있으며 방대한 양의 서드파티 패키지에서 필요한 패키지를 설치/업데이트하기 쉽게 만들어주는 소프트웨어.
• Bundler : ReactJS는 ES6(EMCAScript 6)의 import와 export를 사용하기 때문에 webpack또는 browerify와 같이 하나의 자바스크립트로 합쳐 최적화해 줄 bundler가 필요. create-react-app으로 생성된 ReactJS 프로젝트는 webpack을 기본적으로 사용함
• Compiler : ReactJS는 ES6 사용을 권장.

    create-react-app은 기본적으로 babel을 사용하고 있고 CodePen으로 생성할 프로젝트에서도 babel을 설정하여 사용

 

3. CodePen으로 간단한 프로젝트 만들기 연습

- CodePen( https://codepen.io/ )은 코드를 웹에서 실행하고 공유할 수 있는 사이트이며 간단한 코드를 시행해 보고 싶을 때, 실행환경설정이 안되어 있는 곳이나 환경을 설정하는 것이 번거로울때 사용하기 좋은 사이트

 

 우선 CodePen 사이트에 가입을해야 사용이 가능합니다.

<Codepen 실행화면>

 

그럼 아래처럼 순서대로 실행을 하여 위에처럼 실행하는것 까지 하겠습니다.

1. https://codepen.io/  접속하여 로그인 합니다.

2. Pen 메뉴를 클릭

3. 이제 코드를 작성할 수 있으니 HTML/JS에 코드를  작성합니다. 그리고 작성하기 전에 Settings에서 설정을 해야  합니다.

1) 설정에서 Babel 을 선택합니다.

2) Add External Scripts/Pens에서 다음의 두가지 주소를 등록합니다.

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js

HTML 코드

<div id="root">
</div>

JS 코드

ReactDOM.render(
	<h1>간단한 컴포넌트 예제</h1>,
	document.getElementById('root')
);

 

그럼 ReactJS를 어렵지 않게 테스트를 해볼 수 있습니다. 

우선 이렇게 해서 간단한 코드를 연습합니다. ^^