React class 01 (220604) 정리하지 않고 메모하는 포스팅

정재욱·2022년 6월 4일
0

React

목록 보기
1/2

why React?

리액트를 쓰는 이유가 무엇인가를 알아보자.

React.createElement 사용법

// 기본 사용법
React.createElement(
	type // 태그 이름 문자열 | 리액트 컴포넌트 | React.fragment
    [props] // 리액트 컴포넌트에 넣어주는 데이터 객체
    [...children] // 자식으로 넣어주는 요소들
)
  1. 태그 이름 문자열 type

// 1. 태그 이름 문자열 type
//<h1>type이 "태그 이름 문자열" 입니다.</h1>
ReactDOM.render(
	React.createElement('h1', null,`type이 "태그 이름 문자열" 입니다.`),
    document.querySelector('#root')
    );

결과

<div id="root">
<h1>type이 "태그 이름 문자열" 입니다.</h1>
</div>

type이 "태그 이름 문자열" 입니다.

  1. 리액트 컴포넌트 type
// 2. 리액트 컴포넌트 type
//<h1>type이 "React 컴포넌트" 입니다.</h1>
const Component = () => {
	return React.createElement(
    'p',
    null,
    `type이 "React 컴포넌트" 입니다.`
    )
}

// <Component></Component>
// => <p>type이 "React 컴포넌트" 입니다.
ReactDOM.render(
  React.createElement(Component, null, null),
  document.querySelector('#root')
  )

결과

<div id="root"><p>type이 "React 컴포넌트" 입니다.</p></div>

type이 "React 컴포넌트" 입니다.

  1. React.Fragment
        // 3. React.Fragment
        // type이 "React Fragment" 입니다.
        ReactDOM.render(
            Readt.createElement(
                React.Fragment,
                nul,
                'type이 "React Fragment" 입니다.'
  			),
            document.querySelector('#root')
        );

결과

<div id="root">type이 "React Fragment" 입니다.</div>
type이 "React Fragment" 입니다.
  1. 복잡한 리액트 엘리먼트 모임
    (React.createElement()의 한계), JSX의 필요성.
  // 4. 복잡한 리액트 엘리먼트 모임
        // 
        // <div>
        // <div>
        //     <h1>주제</h1>
        //     <ul>
        //         <li>React</li>
        //         <li>Vue</li>
        //     </ul>
        //  </div>
        // </div>

        ReactDOM.render(
            React.createElement(
                "div",
                null,
                React.createElement(
                    "div",
                    null,
                    React.createElement("h1", null, "주제"),
                    React.createElement("ul", null, React.createElement('li', null, "React"), React.createElement('li', null, "Vue")
                    )
                )
            ),
            document.querySelector('#root')
        )

결과

        <div>
        <div>
            <h1>주제</h1>
            <ul>
                <li>React</li>
                <li>Vue</li>
            </ul>
         </div>
        </div>

주제

  • React
  • Vue

구분선


   const component = {
            message: 'init',
            count: 0,
            render() {
                return `<p>${this.message} : ${this.count}</p>`;
            }
        }

        function render(rootElement, component) {
            rootElement.innerHTML = component.render();
        }

        // 초기화(실행? 표시?)
        render(document.querySelector('#root'), component);

        document.querySelector('#btn_plus').addEventListener('click', () => {
            component.message = 'update';
            component.count = component.count + 1;

 		//실행           
            render(document.querySelector('#root'), component);
        })
        
        // 상태값이 변할때마다 render를 계속 실행시켜줘야함
        // 이것이 자바스크립트의 문법
        

Component?

<!-- HTML Element -->
<img src="이미지 주소"/>
<button class="클래스 이름">버튼<button>

<!-- 내가 만든 Component -->
<내가지은이름1 name="zaelook" />
<내가지은이름2 prop={false}>내용</내가지은이름2>

내가 정의하는 ??

Virtual Dom?

State Change -> Compute Diff -> Re-render

CSR - SSR?

React Client Side Rendering
React Server Side Rendering

CSR

  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음.
  • JS가 전부 다운로드 되어 리액트 어플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능

SSR

  • JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음.
  • JS가 전부 다운로드 되어 리액트 어플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능

React Module


// 기초 핵심 모듈 2개
// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';

// 2. 리액트 컴포넌트 만들기
import React from 'react';

import는 ES6 모듈 방식이죠
보통 node.js 에서 모듈을 가져다 쓰려고 하면
require를 이용하게 되는데요

우리가 리액트를 사용하면서 import를 사용할 수 있는 이유는
나중에 webpack을 통해서 변경이 되기 때문에
import 구문을 사용할 수 있게 됩니다.

보통 js에서 라이브러리라고 하면 스크립트를 추가해서
추가된 스크립트의 전역 객체를 끌어다 사용하는 경우가 많은데

import 구문으로 모듈화시켜서 가져오고 사용할 수 있는것은
그냥 자바스크립트로만 사용할 수 없기 때문에

다른 webpack이나 번들러를 사용하게 된다

profile
이 벨로그에서는 정보를 습득해가지 마세요 틀렸을수도 ^^;

0개의 댓글