리액트(react-fundamental)

하비·2024년 1월 18일

리액트 시작하기

리액트는 사용자 인터페이스 구축을 위한 JavaScript 오픈소스 라이브러리입니다

들어가기에 앞서

리액트가 어떻게 동작하는 원리인지 알아보기
1. 데이터 분리 후 선언
2. 동적 렌더링

데이터 분리 후 선언

const appData = {
        headline: "리액트",
        paragraph:
          "리액트는 사용자 인터페이스 구축을 위한 JavaScript 오픈소스 라이브러리입니다.",
      };
//문서(DOM)에서 대상(요소)찾기
const appElement = document.getElementById("app")	;

2.동적 렌더링

function render() {
      const h1Element = document.createElement("h1");
      const pElement = document.createElement("p");
      //데이터 바인딩
      h1Element.textContent = appData.headline;
      pElement.textContent = appData.paragraph;
      //화면에 렌더링
      appElement.append(h1Element, pElement);
    }
    render();

데이터를 분리하고, 경로를 지정해서 렌더링 해주는 과정을 리액트에서 하게 된다.

개발자 도구에서 ctrl+shift+p disabled JavaScript 하면 noscript를 확인할 수 있음

리액트 시작하기

리액트
따로 설치 없이 모듈을 불러와서 쓸 수 있다.(리액트 역시 객체로 구성되어 있으며 그 안의 메서드를 가져와서 쓸 수 있음)

//React 모듈 불러오기
import React from "https://esm.sh/react"; //버전 갖고 오고 싶으면 뒤에 적어주면 됨
//createElement(type,props,...children)
// type(요소이름:문자), props(속성 집합(객체), ...children(중첩된 요소 또는 텍스트)
const h1Element = React.createElement("h1",{},"리액트");
// {createElement as h}로 간편하게 쓸 수 있음 여기서 h는 hyper script를 나타냄

...children = [child1, child2,child3...] 으로 append를 이용해 추가함

리액트로 리액트 엘리먼트를 생성하면, 그걸 리액트 DOM으로 화면에 렌더링 할 수 있다

리액트 DOM

리액트로 생성한 엘리먼트를 화면에 뿌려주는 역할을 함

//ReactDOM 모듈 불러오기
import ReactDOM from "https://esm.sh/react-dom";
// ReactDOM API
// ReactDOM.createRoot(container) // 실제 DOM에 위치한 #root 요소
const reactDOMRoot = ReactDOM.createRoot(document.getElementById("root"));
reactDOMRoot.render(h1Element)
//리액트 DOM 루트 객체 생성
//리액트 엘리먼트를 리액트 돔의 렌더 능력으로 화면(DOM)에 그린다