안녕하세요 CodeHoon입니다.
이번 글은 렌더링 기초 중의 기초이자 핵심, 컴포넌트 / 함수형으로 랜더링하기 (예제 포함) 입니다.
html에서는 h1태그와 img 태그. 이 두가지를 삽입하기만 하면 해당 내용이 출력되어져 편했었죠?
리액트에서는 조금 더 들어가야합니다. WebFramework이니까요.
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component{
render(){
return (
<div>
<h1>{this.props.name}님, 안녕하세요</h1>
<img src={this.props.imgUrl}/>
</div>
)
}
}
// 출력
const container = document.querySelector("#root")
ReactDOM.render(
<App name="애용" imgUrl="https://newsimg.hankookilbo.com/cms/articlerelease/2019/04/29/201904291390027161_3.jpg" />, container
)
</script>
</body>이곳에서 중요한 점은 저 위 return에서 첫번째줄 <div>를 엔터처리하여 return ; 이 되지 않게 하는 것입니다.
그래서 괄호( ) 를 넣어놓았어요.
지난번과 다른점은 함수형인 부분인데요,
바로 클래스 컴포넌트를 이용했다는 점입니다.
반응형
'FrontEnd > React.js' 카테고리의 다른 글
| [ React.js ] 에러 VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined (0) | 2021.09.01 |
|---|---|
| [ React.js ] 현재 시각 시계 만들기 예제 (0) | 2021.08.30 |
| JSX 기본 문법 - 기초 (0) | 2021.08.27 |
| [ React.js ] Render() - 리액트 시작하기 예제 (0) | 2021.08.25 |
| [ React.js ] 시작하기 - Script태그 내에 CDN 작성하기 (0) | 2021.08.25 |