1. React

React 구조 알아보기

⇒ 어떤 데이터(list)를 특정 컴포넌트(app)을 통해 rootElement에 그려주는 일련의 과정이 있다.

• 일반적으로 rootElement의 innerHTML을 이용해 문자열 element를 생성해 직접 넣어줄 수 있다.

const list = [
    { title: "React에 대해 알아봅시다." },
    { title: "Redux에 대해 알아봅시다." },
    { title: "Typescript에 대해 알아봅시다." },
];

const rootElement = document.getElementById("root");

// ▼ app 함수의 인자로 데이터를 넘겨받는 방법으로 변경하여 "순수함수"로 만들어주었다.
function app(items) {
    rootElement.innerHTML = `
        <ul>
            ${items.map((item) => `<li>${item.title}</li>`).join("")}
        </ul>
    `;
}
app(list);

• 위의 app함수는 innerHTML을 통해 DOM에 직접 접근해 구조를 변경하고 있다.
• DOM에 직접 접근하는 구조는 권장되지 않는데. 규모가 커지면 리팩토링이나 코드 가독성에 어려움을 주고 더불어 불필요한 성능 저하가 발생할 수 있기 때문이다.
• 이러한 문제를 해결하기 위해 페이스북이 React.js를 개발했다.
• 브라우저는 HTML이라는 텍스트 데이터를 DOM이라는 트리 구조의 데이터로 변환해 관리한다. React는 DOM을 VDOM으로 변환해 조금 더 간단하게 개발자가 사용할 수 있도록 만들었다.

React Virtual DOM 이해하기

⇒ 기본적인 React 의 구조는 아래와 같다.

• App 함수의 반환값은 JSX 문법이며, HTML 태그와 비슷한 사용법으로 컴포넌트를 만든다.
• ReactDOM은 render라는 정적 메서드를 가지며 2개의 인자를 받는데, 첫 번째 인자는 화면에 렌더링 할 컴포넌트이며, 두 번째는 컴포넌트를 렌더링할 엘리먼트를 받는다. render는 App 컴포넌트를 통해 생성된 vdom 객체를 훑으면서 실제 DOM으로 그려주는 역할을 한다.

import React from "react";
import ReactDOM from "react-dom";

function App() {
    return (
        <div>
            <h1>Hello?</h1>
            <ul>
                <li>React</li>
                <li>Redux</li>
                <li>MobX</li>
                <li>Typescript</li>
            </ul>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

• 위의 코드를 조금 분리하면 아래와 같이 쓸 수 있다.
• App 내부에 있던 ul > li 컴포넌트들을 StudyList라는 컴포넌트로 분리했다.
  • 컴포넌트 자체에 의미를 줄 수 있는 함수를 만들어 코드 관리의 용이성을 높였다.
  • 읽기 쉬우면 고치기 쉬다. 좋은 컨셉은 좋은 부과효과를 창출한다.
• JSX에도 HTML과 비슷하게 태그에 속성을 사용할 수 있다.
  • HTML → class
  • JSX → className