[처음 만난 리액트] section 2. 리액트 시작하기

2024년 03월 23일 17시 11분 37초에 업로드 된 글입니다.

작성자: 민발자

728x90

1. 직접 리액트 연동하기

📃 index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>블로그</title>
  </head>
  <body>
    <h1>블로그에 오신 여러분을 환영합니다</h1>

    <!-- virtual DOM의 시작점: DOM Container(Root DOM Node) -->
    <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>

🔎 link 태그

현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용

css 파일을 불러오거나 favicon 같은 것을 넣기 위해 사용

🔎 React 추가하기

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

리액트를 사용하기 위해 DOM 컨테이너를 추가

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

스크립트 태그를 이용해 리액트 js파일과 리액트 컴포넌트를 가져오기

📃 style.css

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

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

🔎 렌더링

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

컴포넌트를 DOM 컨테이너에 렌더링

📊 결과 확인

2. create-react-app

📌 create-react-app(CRA)

리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어있는 상태로 프로젝트를 생성해주는 도구

👩🏻‍💻 react app 생성

$npx create-react-app <project-name>

🔎npx(execute npm package binaries)

npm 패키지를 설치한 이루 곧바로 실행, 엑스큐트까지 해주는 명령어

📊 애플리케이션 실행

#경로 변경
cd project-name

#애플리케이션 실행
npm start