import React, { Component } from 'react';
export default class Basic extends Component {
renderSeparate() {
return (
<div>코드를 분리합시다</div>
);
}
render() {
return (
<div>
<span>저는 컴포넌트입니다!</span>
<span>독립 만세!</span>
<span>재사용 만세!</span>
{this.renderSeparate()}
</div>
);
}react 묘듈로부터 Component를 상속받는 Basic 클래스를 만들었다. Component를 상속 받아야 이 코드가 리액트 컴포넌트임을 자바스크립트 엔진이 알 수 있다.
Basic이 이 컴포넌트의 이름이다. 마지막 Component에는 render 메소드가 있는데 이 메소드가 반환하는 게 실제로 보여지는 DOM이 된다.
그리고 자바스크립트인데 html이 들어있는 것을 볼 수 있다. 이것은 JSX라고 불리는 문법이다. 이 자바스크립트 파일 하나가 독립적인 컴포넌트 임무를 수행해야 하므로 자바스크립트 코드와 HTML코드가 같이 있다. JSX를 사용할 때는 몇가지 있는데
컴포넌트는 반드시 하나의 노드로부터 시작해야한다. (위의 예시에서는 span 3개가 div로 감싸져 있다. 꼭 div일 필요는 없지만, 컴포넌트는 반드시 하나의 태그로 감싸져있어야함.이게 단점이기도하다.)
하지만 React16부터는 이 문제가 해결되어서 아래와 같이 사용하면 된다. 대신 각각의 요소에 키를 주도록 하자.
return [
<div key="a">A</div>,
<div key="b">B</div>
];
React16.2부터 이렇게도 가능함.import React, { Component, Fragment } from 'react'를 한 후,
return (
<Fragment>
<div>A</div>
<div>B</div>
</Fragment>
)개인적으로 배열보다는 Fragment를 쓰는 것이 깔끔해보인다.
또 속성명으로 자바스크립트처럼 camelCase를 사용해야한다. 만약 img 같이 태그 안에 내용이 없는 경우 꼭 />로 닫아주어야한다.
그리고 class가 아니라 className을 사용해야함.
(class는 자바스크립트에서 예약어이기 때문에 className으로 대체되었다. 비슷한 예로 label의 for 속성은 htmlFor로 대신한다.
조건문을 안에 넣을 수도 있는데 대신 if문이 아니라 삼항연산자를 사용해야 한다.
return (
<div>
<img src="주소" className={condition ? 'imageHighlight' : 'image'} />
{condition && <button onClick={this.onClickButton}>클릭</button>}
</div>
);이 예시는 condition을 만족하면 className이 imageHighlight가 되고, 아닌 경우에는 image가 된다. 또한 condition을 만족할 경우에만 button을 렌더링한다. onClick이 camelCase인 것에 주의!!
const renderSeparate = () => <div>코드를 분리합시다</div>;
export default const Basic = () => {
return (
<div>
<span>저는 컴포넌트입니다!</span>
<span>독립 만세!</span>
<span>재사용 만세!</span>
{renderSeparate()}
</div>
);
};renderSeparate함수를 호출하는 부분이있다. 그리고 renderSeperate 메소드를 보자. renderSeperate함수는 똑같이 JSX를 return 하지만 위의 render메소드에서처럼 실행을 시켜야만 render된다. 이렇게 코드를 분리해 특정한 조건에만 render한다던지 할 수 있다.
class로 만들었든 함수로 만들었든 간에 만들어진 컴포넌트는
<Basic />이렇게 부모 컴포넌트에서 사용 할 수 있다.
이렇게 만든 basic.js를 render.js에서 import하고 바벨로 render.js를 컴파일한다.
render.js
import Basic from './basic';
import { render } from 'react-dom';
render(<Basic />, document.getElementById('root'));render.js를 보면 root 아이디를 가진 태그에 Basic 컴포넌트를 넣는 것을 볼 수 있다. react.html을 만들어서 #root 태그와 바벨로 컴파일 된 render.js를 넣고 실행해보자.
react.html
<html>
<body>
<div id="root"></div>
<script src="./render.js"></script>
</body>
</html>