JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.
기초 지식은 다른 강의를 참조하도록 하라.
이 강의는 React의 사용법 위주로 작성되어 있다.
왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.
참조:
React를 이제 컴포넌트를 사용할줄 알게되었다.
그러나 전 포스팅의 경우 아직 반쪽자리라고 할 수 있다.
물론... 반쪽짜리라기에는 많이 부족하긴 하지만...
그 이유는 아직 변수를 받아서 포스팅을 할 수 없기 때문이다.
따라서 이번에는 변수를 사용하는 방법에 대해서 알아보도록 하자.
<!DOCTYPE html>
<html lang="en">
<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 () {
return (
<h1>Hello, {this.props.user || 'korean'}</h1>
);
}
});
ReactDOM.render(
<div>
<HelloWorld/>
<HelloWorld user="kukaro"/>
<HelloWorld user="jiharu"/>
</div>,
document.querySelector('#container')
)
</script>
</body>
</html>
코드의 전문이다. 주목해야할 부분은 HelloWorld컴포넌트를 만들어서 사용한다는데 있다.
여기서 전에 없던 부분이 있다. 더 세부화해서 보도록 하자.
ReactDOM.render(
<div>
<HelloWorld/>
<HelloWorld user="kukaro"/>
<HelloWorld user="jiharu"/>
</div>,
document.querySelector('#container')
)
컴포넌트를 사용할 때 원래 html처럼 속성을 붙혀주었다.
여기서 붙은 속성은 react에서 props로 붙게된다.
즉 위의 예제에서 props.user에 여러분이 입력한 값이 들어가게 된다는 것이다.
만약 값을 넣을 수 없다면 초기값을 넣어주면된다.
위의 예제처럼 사용하면된다.
그럼 한번 실행해보도록 하자.
이제 변수(속성)를 입력하는 방법에 대해서 알았다.
props중에도 이미 정의된 특수한 props가 존재한다.
바로 child이다 아래의 예제를 보도록 하자.
<!DOCTYPE html>
<html lang="en">
<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 () {
return (
<h1>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>
여기서 자세히 보면 우리는 props로 children을 선언하지 않았다.
그럼에도 불구하고 위의 예제는 정상적으로 실행이 된다.
그 이유는 엘레멘트의 자식값(그 값이 text라 할지라도)이 this.props.children이라는 값으로 들어가기 때문이다.
위의 예제를 실행해보자.
정상적인 값이 들어오는 것을 확인할 수 있다.
사실 변수에 대해서는 앞으로 더 자세히 알아나갈 것이므로 계속해서 보도록하자.
'Programming > JavaScript-React' 카테고리의 다른 글
| [React-06]css - react css스타일 (0) | 2018.11.24 |
|---|---|
| [React-05]css - 기존 css스타일 (0) | 2018.11.24 |
| [React-03]React Compnent (0) | 2018.11.12 |
| [React-02]createElement로 dom트리 만들기 (0) | 2018.11.11 |
| [React-01]React 시작하기 (0) | 2018.11.06 |