본문 바로가기
JavaScript/React

[React] .html에서 react 사용, React의 동작 원리

by curious week 2025. 1. 9.

js로 ui 업데이트 하기

 <html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // id가 app인 요소 선택
      const app = document.getElementById('app');

      // 새로운 h1 요소 만들기
      const header = document.createElement('h1');

      // h1에 들어갈 텍스트 노드 만들기
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);

      // h1에 텍스트를 추가
      header.appendChild(headerContent);

      // id가 app인 요소의 자식요소로 h1 추가
      app.appendChild(header);
    </script>
  </body>
</html>
<!-- 일반 js로 DOM을 업데이트 하는 것은 위처럼 장황하다. -->

React - DOM 사용하기

<html>
  <body>
    <div id="app"></div>
    <!-- script 두 줄을 추가하면 react와 DOM을 사용할 수 있다. -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- type="text/javascript"를 사용하면 오류가 발생한다.  -->
    <script type="text/jsx">
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>
<!-- js로 ui를 업데이트 하는 것에 비해서 코드가 간소화된다. -->

컴포넌트로 ui구축

<!-- 모듈로 관리하면 나머지 부분에 영향을 주지않고 구성요소를 바꿀 수 있어 관리에 용이하다. -->
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');

      // 1. React 구성 요소는 일반 HTML 및 JavaScript와 구별하기 위해 대문자로 시작
      // ui를 반환하는 함수
      function Header() {
        return (<h1>Develop. Preview. Ship.</h1>)
      }

      function HomePage() {
        return <div>
          {/*  헤더 구성요소 중첩 */}
          <Header />
        </div>
      }

      const root = ReactDOM.createRoot(app);
      // 2. React 구성 요소는 HTML과 같은 방식으로 꺾쇠 괄호를 사용
      root.render(<HomePage />);
    </script>
  </body>
</html>

props 사용법

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');

      // props는 객체이므로 객체 분해를 사용할 수 있다.
      // function Header(props) {
      //   console.log(props); // { title: "React" }
      //   return <h1>Develop. Preview. Ship.</h1>;
      // }

      function Header({ title }) {
        return <h1>{title ? title : 'Default title'}</h1>;
      }

      // (반복하기)
      function HomePage() {
        const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

        return (
          <div>
            {/* props = 정보 조각, React 구성 요소에 정보 조각을 속성으로 전달할 수 있다. */}
            <Header title="React" />
            <Header title="A new title" />
            <Header title="Develop. Preview. Ship." />

            {/* 반복하기 */}
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
          </div>
        );
      }

      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

Props 사용법
1) .을 사용한 객체 속성

function Header(props) {
  return <h1>{props.title}</h1>;
}


2) template literal

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}


3) 함수의 반환

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

 

4) 삼항 연산자

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

state로 상호작용 하기

useState 사용

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');

      function Header({ title }) {
        return <h1>{title ? title : 'Default title'}</h1>;
      }

      function HomePage() {
        const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

        // 배열 1: 값, 설명적인 이름을 지정하는 게 좋다.
        // 배열 2: update 값, 보통 set + 배열 1 이름으로 이름을 짓는다.
        // React.useState(this) this == 초기 값을 지정할 수 있다.
        const [likes, setLikes] = React.useState(0);

        function handleClick() {
          setLikes(likes + 1);
        }

        return (
          <div>
            <Header title="Develop. Preview. Ship." />

            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
            <button onClick={handleClick}>Likes ({likes})</button>
          </div>
        );
      }

      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

 

저작자표시 동일조건 (새창열림)

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

React 프로그래밍을 위한 javascript 기본  (0) 2025.03.21
서버 트래픽 비용을 줄이고 싶을 때, Squoosh  (0) 2025.03.06
[React] function - export가 없는 경우, export가 있는 경우: export, export default의 차이  (0) 2025.01.12
[React] React Hook[State, Effect, Ref, Context, Memo, Callback, Reducer, customHook]  (1) 2025.01.11
[React] react.dev > react 빠르게 시작하기  (3) 2025.01.10

관련글

티스토리툴바