component 만들기
<html>
<body>
<header>
<h1>WRB</h1>
world wide web!
</header>
</html>위 코드에서 header 부분이 만약에 아주 긴 코드라면 하나의 다른 곳에서 정의해서 사용자가 정의한 태그의 이름 형태로 바꿔줄 수 있다.
이런 식으로 컴포넌트들을 만들어 가면서 화면을 구성하는 방법이 리액트의 기본 활용방식인 것 같다.
class Subject extends Component {
render() { //클래스 안에서는 function 키워드가 없어도 된다.
return (
//여기서 중요한 것은 하나의 최상위 태그만을 가져야 한다.
<header>
<h1>WRB</h1>
world wide web!
</header>
);
}
}그리고 여기서 의문이 드는 점이 하나 있었는데 js라면 return 이후에 오는 코드에 대해서 (`)백틱 문자나 따옴표가 없이 저렇게 template을 정의하면 작동을 안 할 것 같은데 작동을 하는 이유가 저 문법은 정확하게 js가 아니고 react에서 허용하는 js와 상당히 유사한 JSX 언어이기 때문에 작동하는 것이다.
props
html 태그에 속성값으로 어떤 값을 넣어주면 정의한 컴포넌트 안에서 그 속성값을 받아와서 작성할 수 있다.
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="this is React!"></Subject>
//속성값으로 title, sub 늘 넘겨준다.
<TOC></TOC>
<Content></Content>
</div>
);
}
}이렇게 넘겨준 값을 Subject 라는 컴포넌트를 정의해주는 부분에서
받아와서 사용할 수가 있다.
class Subject extends Component {
render() {
return (
<header>
//이런 식으로 props를 이용해서 title, sub을 쓸 수 있다.
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
Dom Hardy : 멋쟁이 개발자 되기 인생 프로젝트 진행중