React 직접 연동하기

괘창 2024. 6. 25. 14:43

2024. 6. 25. 14:43

■ React 직접 연동하기

HTML만을 사용해서 간단한 웹사이트를 만들어보고 CSS 사용해서 스타일 입히기

이후 완성된 웹사이트에 React를 적용한 후 마지막으로 React 앱을 생성해주는 Create React에 대해 알아보자.

※ 기존에 있는 웹 사이트에 React를 적용하는 방법

■ HTML만으로 간단한 웹 사이트 만들기

HTML은 웹 사이트전체 뼈대를 구성한다.

<!-- index.html -->
<html>
    <head>
        <title>루카스 실습</title>
    </head>
    <body>
        <h1>루카스의 리액트 테스트</h1>
    </body>
</html>

■ CSS를 사용하여 웹 사이트 스타일링하기

CSS 코드를 별도 파일로 분리해서 작성한 뒤 해당 파일을 불러와 HTML에 적용

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

<html>
    <head>
        <title>루카스 실습</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>루카스의 리액트 테스트</h1>
    </body>
</html>

※ index.html과 styles.css 파일이 동일한 디렉터리에 위치해야 한다.

※ css를 적용하기 위해 html 파일에서 css 파일을 불러와야 한다.

ㄴ 필요 태그 : <link> : 링크 태그는 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용

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

- css 적용화면

■ 웹 사이트에 React.js 추가하기

<html>
    <head>
        <title>루카스 실습</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>루카스의 리액트 테스트</h1>

        <div id="root"></div> <!-- DOM Container(Root DOM Node)-->
    </body>
</html>

# 리액트의 장점으로 Virtual DOM을 이용한 빠른 업데이트와 랜더링에 대해 배웠으며,

여기에 나오는 DOM이 바로 DOM 컨테이너다.

# 다른 말로 Root DOM Node라고 부른다.

# Virtual DOM의 시작점

※ 해당 div 태그가 앞으로 DOM 컨테이너로 사용될 예정

<html>
    <head>
        <title>루카스 실습</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>루카스의 리액트 테스트</h1>

        <div id="root"></div> <!-- DOM Container(Root DOM Node)-->

        <!-- 리액트 가져오기 -->
         <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>

# 스크립트 태그를 사용해서 React의 JavaScript파일을 가졍로 수 있도록 했다.

# MyButton이라는 이름의 react 컴포넌트를 가져오는 코드 미리 생성

- 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);

# React의 간단한 함수 컨포넌트

# 끝 두줄의 코드는 React DOM의 랜더함수를 사용해서 React 컴포넌트를 DOM 컨테이너에 랜더링 하는 코드

위 두줄의 코드가 필요한 이유는 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도
컴포넌트가 화면에 보이는 것이 아니기 때문이다.

- React 적용 화면

# 버튼을 클릭하면 버튼안의 내용이 변경되는 것을 확인할 수 있다.

# 변경된 이유는 React 컴포넌트의 state가 변경되었기 때문이다.

저작자표시 비영리 변경금지 (새창열림)

'Web > React' 카테고리의 다른 글

React JSX 정의와 역할 (0)	2024.06.25
React create-react-app (0)	2024.06.25
React 리액트 장점과 단점 (0)	2024.06.25
React 리액트 소개 (0)	2024.06.25
React 개발환경 설정하기 (0)	2024.06.25

개발일기