[ReactJS] Codepen 설정, ES6 클래스, JSX의 특징

JavaScript Class와 JSX

JavaScript Class와 JSX

: ES6에 새롭게 도입된 문법인 JavaScript Class == Component

Codepen 설정

- https://codepen.io/pen/ 접속

- setting 클릭

  1. javascript : babel로 설정한다.

  2. Add External Scripts/Pens : https://unpkg.com/react@15/dist/react.js , https://unpkg.com/react-dom@15/dist/react-dom.js 를 추가시킨다.

babel로 설정하는 이유는 2015년에 업데이트된 JavaScript 문법인 ES6를 사용하기 위해서다. ES6로 작성된 코드를 이전 문법인 ES5로 변환시켜주는 것이 바로 이 babel이다.

그렇다면 왜 변환을 해줘야 하는가?

우리가 웹사이트를 만들 때 여러 브라우저를 호환시켜야 한다. 크롬이나 파이어폭스는 괜찮지만 구 버전 브라우저, 인터넷 익스플로러에서는 지원을 전부 하지 않기 때문에 ES5로 변환을 시켜줘야 하는 것이다.

본격적으로 시작해보자

Component는 JavaScript Class이다. 그리고 React Component를 상속한다.

잠깐, JavaScript의 Class????? 생소하다.

class는 ES6에 새롭게 도입된 문법이다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

그럼 이제 Codelab이라는 이름의 컴포넌트를 만들어보자.

모든 리액트 컴포넌트는 render 메소드가 있는데 이것은 컴포넌트가 어떻게 생길지 정의해준다. 여기서 특별한 점 하나는 JSX다. 이것은 자바스크립트 코드에서 html 형식을 그대로 사용할 수 있다. 그리고 React JSX는 XML같은 문법을 Native JavaScript로 변환해준다.

render 메소드 안에서 어떤 뷰를 보여줄 지 JSX 형태로 리턴하면 된다.

(JS 줄 9~15) 컴포넌트를 다른 컴포넌트에서 또 다시 사용할 수도 있다. App이라는 컴포넌트를 새롭게 만들어서 Codelab 컴포넌트를 보여주고 있다.

(HTML 줄 1) html에 id가 root인 디바이저를 작성한다.

(JS 줄 17) ReactDOM이 render 메소드를 이용하여 우리가 만든 컴포넌트를 렌더링한다.

ReactDOM은 실제 페이지에 JSX 형태의 코드를 렌더링할 때 사용된다.

이 메소드의 첫 번째 인수는 우리가 렌더링할 JSX형태의 코드이다. 우리는 App 컴포넌트를 렌더링할 거니까 첫 번째 인수에 <App/>을 적어준다.

이 메소드의 두 번째 인수는 이 컴포넌트를 렌더링할 element이다. 우리는 root element에 렌더링할 거니까 document.getElementById('root')를 적어준다.

실행결과 : Codelab

JSX의 중요한 특징

1. Nested Element

모든 JSX형태의 코드는 container element 안에 포함시켜줘야 한다.

2. JavaScript Expression

JSX 안에서 javascript를 표현할 때는 그냥 { } 로 wrapping하면 된다.

코드 예시)

3. Inline Style

JSX 안에서 style을 설정할 때는 string 형식을 사용하지 않고 key가 camelCase인 객체가 사용된다.

ex. background-color (x), backgroundColor (o)

코드 예시)

4. comments

jsx 안에서 주석을 작성할 때는 {/* ...*/} 형식으로 작성해야 한다.

주의할 점은 이 역시 container element 안에 주석이 작성되어야 한다는 것이다.

코드 예시)