프론트엔드 개발자들의 놀이터 Codepen.io
Codepen.io 에 접속하면 회원가입을 간단히하고 create를 하여 새 프로젝트를 생성한다.
그 후 Settings를 클릭하여 javascript에서 javascript Preprocessor는 Babel로 설정하고
아래에 Quick-add에서 React와 react-dom을 추가해준다.
여기서 Babel은 ES6의 코드를 ES5로 자동으로 변환해주는 기능을 해준다.
※ 왜 변환을 해야할까? 최신 크롬이나 파이어폭스는 ES6를 지원하지만 IE나 구버전들은 지원하지 않기때문에 변환을 해주어야한다.
그 후에 Save&close를 클릭해주면 세팅은 끝이난다.
Let’s Code
첫 컴포넌트를 만들어보자
class Codelab extends React.Component { // React.Component를 상속받는다
render () { // 모든 React.Component는 render 메소드가 있음.
return(
<div>Codelab</div> // JSX형태의 문법이다.
);
}
}
class App extends React.Component {
render() {
return(
<Codelab/>
);
}
}
ReactDOM.render(<App/>,document.getElementById("root"));
// html
<div id="root"></div>
이렇게 까지한다면 html에 그려지게 될것이다.
JSX의 특징
- Nested Element
/* 에러 발생 코드 */
render() {
return(
<h1>hello</h1>
<h2>I am Sam</h2>
);
}
/* 컴포넌트에서 여러 Element를 렌더링 할때 곡 container element 안에 포함시켜야 한다. */
render () {
return (
<div>
<h1>hello</h1>
<h2>I am Sam</h2>
</div>
);
}
- JavaScript Expression
/* JSX 안에서 자바스크립트를 표현하는 방법은 간단하다. 그냥 {}로 wrapping하면 된다 */
render () {
let text = "Hello React!";
return (
<div>{text}</div>
);
}
/* If Else 문은 JSX에서 사용 불가능. 이에대한 대안은 삼항연산자가 있다. */
render () {
return (
<p>{1==1 ? 'True' : 'False'}</p>
);
}
여기서 let은 ES6에서 지원하는 변수이며 가끔생기는 Scope문제를 없애준다.
- Inline Style, 주석
/* JSX 안에서의 style은 카멜케이스로 해야한다. */
render() {
let style = {
backgroundColor : black;
}
}
/* 주석은 { /*...*/ } 형식으로 작성해야한다.
주석은 div안에 있어야한다.