React 시작

React 랜더링 해보기

HTML 뼈대 만들기

index.html

<html>
    <head>
        <title>Heo의 블로그</title>
    </head>
    <body>
        <h1>Heo의 블로그에 오신 것을 환영합니다!</h1>
    </body>
</html>

먼저 뼈대인 HTML의 틀을 간단하게 만들었다. 위 그림을 보면 title 태그와 h1 태그의 내용이 올바르게 나오는 것을 확인할 수 있다.

CSS 적용

index.html

<html>
    <head>
        <title>Heo의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Heo의 블로그에 오신 것을 환영합니다!</h1>
    </body>
</html>

링크 태그는 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용한다.

css 파일을 불러오거나 웹 브라우저의 탭에 나오는 아이콘인 favicon 같은 것을 넣기 위해 가장 많이 사용된다.

참고로 index.html 파일과 styles.css 파일이 동일한 디렉토리에 위치해야 한다.

styles.css

h1 {
    color: green;
    font-style: italic;
}

위 그림을 보면 h1의 텍스트 글꼴과 색이 바뀐 것을 확인할 수 있다.

React 랜더링

먼저 DOM Contianer를 등록해준다.

index.html

<html>
    <head>
        <title>Heo의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Heo의 블로그에 오신 것을 환영합니다!</h1>

        <div id="root"></div>  <!--DOM Contianer-->
    </body>
</html>

그리고 리액트를 랜더링 하기위해 아래 코드를 작성한다.

index.html

<html>
    <head>
        <title>Heo의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Heo의 블로그에 오신 것을 환영합니다!</h1>

        <div id="root"></div>

        <!-- 리액트 가져오기-->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

        <!-- 리액트 컴포넌트 가져오기-->
        <script src="MyButton.js"></script>
    </body>
</html>

컴포넌트에서 정의한 이름과 동일하게 MyButton.js을 만들고, 리액트를 적용했다.

MyButton.js

function MyButton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);