안녕하세요 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

웹페이지에 표시된 "React Start"

 

이제 코드 에디터로 React render를 하여 "React Start"를 작성하도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

    <script type="text/babel">
        const component =
        <h1>React Start</h1>; 
        const container = document.querySelector("#root");
         ReactDOM.render(component, container);
    </script>
</body>

</html>

<h1> 태그로 React Start를 입력하여 웹페이지에 출력하도록 하겠습니다.

 

root 라는 id를 가진 div를 생성하고,

스크립트/바벨로 component라는 상수에 태그 <h1>React Start</h1>를 담았습니다.

그리고 querySelector로 아까 만든 div를 찾아주시고,

ReactDOM.render(component, container) 를 작성해주어 해당 내용을 출력합니다.

 

반응형

'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 - 함수형으로 출력하자. - 예제 / 고양이 사진 출력하기  (1) 2021.08.26
[ React.js ] 시작하기 - Script태그 내에 CDN 작성하기  (0) 2021.08.25

+ Recent posts

티스토리툴바