React(Class) - 다른 compoment로 전달
React는 여러 compoments들이 모여서 만들어진다. 이때 각각의 compoment들에 정보 또는 메소드가 제공되고 거기에 따라 동작하게 해야한다.
일단 React를 설치하고 진행하도록 하겠습니다.
위 사진처럼 'Happy hacking!'이 나오면 제대로 설치가 된 것입니다.
import React, { Component } from 'react'
export class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
src폴더에 있는 App.js를 위와 같이 변경합니다.
src폴더에 compoments폴더를 생성합니다. 그리고 그안에 New_compoment.js을 생성합니다.
(아래코드 참고)
import React, { Component } from 'react'
export class New_compoment extends Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
)
}
}
export default New_compoment
위 코드에서 div 태그 안에 h1테그가 있는것을 알수 있습니다. 이안에 "Hello World!"를 입력해 줍니다.
import React, { Component } from 'react'
import New_compoment from './compoments/New_compoment';
export class App extends Component {
render() {
return (
<div>
<New_compoment />
</div>
)
}
}
export default App
다시 app.js파일로 돌아와서 'New_compoment'를 갖고옵니다. (import New_compoment from './compoments/New_compoment)
그리고 div태그 중간에 <New_compoment />를 삽입하면 New_compoment -> App으로 전달이 완료 된 것입니다.
터미널에서 npm start을 하고 브라우저를 확인하면 아래와 같이 출력됬음을 알수 있습니다.
이번 글을 마무리하고 다음에는 state를 설정하고 전달하는 방법에 대해서 설명해 드리겠습니다.
댓글
댓글 쓰기