이전에 React를 왜 사용하는지, 어떻게 초기에 셋팅하는지에 대해 알아봤다.
오늘은 해당 라이브러리를 사용할 때 제일 기본이 되는 Component에 대해 알아보자.
import React from "react”
를 적어줘야 하고, 함수형에서는 import React from "react" 를 적어줄 필요 없다. (업데이트 돼서 안 써도 된다고 한다.)Subject
라는 컴포넌트를 만드는 방법return
안에 필요한 html
내용을 넣는다)class Subject extends Component {
render () {
return (
<header>옮겨올 태그 내용
<h1> Web </h1>
World Wide Web!
</header>
);
}
}
Subject
컴포넌트 만든 거를 React
로 표기할 때 :class App extends Component {
render () {
return (
<div className = “App”>
<Subject></Subject>
</div>
);
}
}
주의할 점
: return 안에는 전체를 감싸는 단일 태그 <>
가 필요하다. 상기같은 경우에는 div태그이다. 간혹 아래와 같은 경우에는 에러가 뜨니 주의하자! class App extends Component {
render () {
return (
<div className = “App”>
<Subject></Subject>
</div>
<div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
index.js 파일에 보면 상기와 같은 코드가 기본적으로 적혀 있다. 저게 무슨 뜻일까? 실질적으로 저 코드로 인해 화면에 띄어주는 것을 볼 수 있기 때문에 무엇인지 알고 가는 게 중요하다고 본다.
document.getElementById("root")
: DOM을 활용하여 id 값이 root인 것을 html에서 가져온다는 뜻<App />
: App 이라고 하는 컴포넌트즉, document.getElementById("root") 안에 <App />
을 그려주겠다 라는 뜻이다.