728x90
JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.
기초 지식은 다른 강의를 참조하도록 하라.
이 강의는 React의 사용법 위주로 작성되어 있다.
왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.
참조:
저번 포스팅에서와는 달리 react스타일로 한번 변형하도록 해보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>React World!</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
var helloStyle = {
color: 'red',
backgroundColor: 'yellow',
padding: 10
};
return (
<h1 style={helloStyle}>Hello, {this.props.children || 'korean'}</h1>
);
}
});
ReactDOM.render(
<div>
<HelloWorld>kukaro</HelloWorld>
<HelloWorld>jiharu</HelloWorld>
<HelloWorld>you</HelloWorld>
</div>,
document.querySelector('#container')
)
</script>
</body>
</html>
이 코드를 한번 분석해 보도록하자.
var helloStyle = {
color: 'red',
backgroundColor: 'yellow',
padding: 10
};
이는 style의 object이다.
여기서 단위의 px는 생략가능하다.
return (
<h1 style={helloStyle}>Hello, {this.props.children || 'korean'}</h1>
);
style에 해당 변수를 집어넣도록하자.
이제 작동해보자.
제대로 동작하는 것을 볼 수 있다.
'Programming > JavaScript-React' 카테고리의 다른 글
| [React-08]create-react-app, cli로 프로젝트 만들기 (0) | 2019.03.22 |
|---|---|
| [React-07]변수(state)와 이벤트 바인딩(event bind)그리고 라이프 사이클(life cycle) (0) | 2019.03.17 |
| [React-05]css - 기존 css스타일 (0) | 2018.11.24 |
| [React-04]props(변수처럼 사용하기) (0) | 2018.11.23 |
| [React-03]React Compnent (0) | 2018.11.12 |