[React] 리액트는 어쩌다가 만들어졌을까? / 리액트 컴포넌트 / JSX

리액트는 어쩌다가 만들어졌을까?

 

JavaScript를 사용하여 DOM을 변형하기 위해서는 브라우저의 DOM select API를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 합니다.

 

참고로 DOM에 대한 설명은 bbangson.tistory.com/62 이 링크에 있습니다.

[JavaScript] 실습 - 카운터 만들기 / 모달 만들기

 

즉, 브라우저의 DOM을 선택하고 이벤트를 걸어주는 규칙을 이용해서 DOM을 변형시켜줘야 합니다.

 

 

작은 애플리케이션이라면 DOM의 개수는 작으니 상관없지만, 이벤트가 자주 발생하고 동적으로 UI를 표현해야 하는 다양한 인터랙션이 있는 규모가 큰 애플리케이션일 경우 정말 많은 규칙이 작용할 것이고 관리하기도 매우 힘들어집니다.

 

처리해야 할 이벤트도 다양해지고 관리해야 할 상태도 다양해지고 업데이트해야 하는 규칙이 많아지기 때문에 코드는 난잡해집니다.

 

조금 과장을 하자면, 코드는 이런 형태가 될 것입니다.

보기만 해도 머리가 아파집니다. 이런 식으로 여기저기서 서로를 참조하게 되고 유지보수하기 힘들어지는 코드가 만들어질 것입니다. 

 

리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아닌 처음부터 모든 것을 새로 보여준다면 어떨까? 라는 아이디어에서 탄생했습니다.

 

이렇게 하면 업데이트를 어떻게 해야 할 지에 대한 고민을 전혀 안 해도 되기 때문에 개발이 정말 쉬워질 것입니다.

 

하지만 동적인 UI를 보여주기 위해서 모든 것을 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느려집니다. 작은 웹 애플리케이션이라면 상관없겠지만 규모가 큰 애플리케이션이라면 상상도 할 수 없는 일입니다.

 

하지만 리액트에서는 Virtual DOM이라는 것을 사용해서 성능을 지켜가면서도 이를 가능케했습니다.

 

Virtual DOM은 가상의 DOM입니다.

 

브라우저에서 실제로 보이는 DOM이 아닌 메모리에 가상으로 존재하는 DOM으로써 자바스크립트 객체이기 때문에 작동 성능이 실제로 브라우저에서 보여주는 것보다 속도가 훨씬 빠릅니다.

 

아래 사진을 같이 참고해보며 설명을 이어가겠습니다.

 

React에서는 상태가 업데이트되면 업데이트가 필요한 UI를 메모리에 있는 Virtual DOM에다가 렌더링을 합니다.

 

그리고 React 개발팀이 만든 매우 효율적인 비교 알고리즘을 사용하여 실제 브라우저에서 보이고 있는 DOM과 Virtual 메모리에 있는 DOM을 비교 후 차이점을 감지하고 나서 실제 DOM에다가 Patch(변화를 반영시킨다.) 합니다.

 

이를 통하여 React에서는 정말 필요한 변화만 발생시키게 되면서 업데이트를 어떻게 할지에 대한 고민할 필요 없이 빠른 성능을 지켜낼 수 있게 되었습니다.

 

그래서 React에서는 UI를 어떻게 업데이트를 할 지에 대한 고민을 하는 것이 아니라 UI를 어떻게 보여줄지에 대하여 집중하면서 프로젝트를 개발하게 됩니다.

 

"React에서는 UI를 컴포넌트(Component)를 사용해서 선언을 한다. 컴포넌트는 일종의 UI 조각이다." 

이렇게 이해하시면 편합니다.

 

 

React에서 컴포넌트가 렌더링 되는 방법

 

VS code에서 npx cra를 진행하여 React 프로젝트를 생성할 경우, 크게 App.js, index.html, index.js가 기본적으로 생성됩니다. 

 

이 3가지의 파일을 봐도 React가 컴포넌트를 렌더링 하는 방법을 알 수 있습니다. 

 

index.html에는 아래와 같은 코드가 존재합니다.

App.js는 아래와 같은 코드로 구성되어 있다고 하겠습니다.

import React from 'react';

function App() {
  return (
    <div >
      <h1> 안녕하세요! </h1>
    </div>
  );
}

export default App;

 

index.js에는 이런 코드가 존재합니다. 

 

간단하게 설명하겠습니다.

 

React 컴포넌트가 렌더링 될 때, 즉 App.js안에 App함수가 렌더링 된다고 한다면 

App.js는 HTML 형태로 만들어져서 index.html 파일 안에 있는 <div id="root"></div>에 삽입됩니다.

 

이런 삽입이 일어나는 과정이 index.js 안에 있는 코드에서 진행이 된다고 생각하시면 됩니다. 

 

 

 

JSX의 기본 규칙 알아보기

jsx는 react에서 컴포넌트의 생김새를 정의할 때 사용하는 문법입니다.

 

얼핏 보기에는 HTML 문법같이 생겼지만 Babel이라는 도구를 사용하여

XML 코드가 JavaScript로 변환되기 때문에 사실은 JavaScript 문법입니다.

 

하지만 XML 코드가 JavaScript로 잘 변환되기 위해서는 몇 가지 규칙이 있습니다.

 

 

1. 태그는 무조건 닫혀있어야 합니다. 

<div>로 시작했으면 </div> 태그로 닫아줘야 합니다. 

또한, <br/>, <input /> 같은 self-closing 태그로도 사용 가능합니다.

 

 

2. 두 개 이상의 태그는 꼭 하나의 태그 안에 감싸있어야 합니다. 

import React from 'react';
import Hello from './Hello';

// 오류 발생!!
function App() {
    return (
    	<Hello />
        <div>안녕히계세요.</div>
    )
}

    
// 오류 발생 안함!!
function App() {
    return (
        <div>
    		<Hello />
        	<div>안녕히계세요.</div>
    	</div>
    ); 
}

하지만 단순히 두 개 이상의 태그를 감싸기 위해 불필요한 <div><div> 태그를 사용하는 것이 맘에 안들 수도 있습니다.

웹 브라우저 안에 쓸데없는 div가 생성되기 때문이죠.

 

그럴땐 fragment <>를 사용하면 됩니다.

function App() {
    return (
        <> 
    		<Hello />
        	<div>안녕히계세요.</div>
    	</>
    ); 
}

fragment는 비어있는 이름을 가지고 있는 태그입니다.

실제로 브라우저에서 내용을 확인하면 별도로 갖고 있는 태그가 없습니다.

 

추가적으로 fragment를 감싸는 ()는 코드의 가독성 때문에 사용한 것입니다. 없어도 무방합니다.

 

 

 

 

3. JSX 내부에서 JavaScript를 사용하는 규칙입니다.

중괄호로 감싸주어서 사용하면 됩니다. 

function App() {
    const name = 'react';
    return (
        <> 
    		<Hello />
        	<div>{name}</div> 
    	</>
    ); 
}

{name} 이 코드는 화면에 react를 출력하게 됩니다.

 

 

 

4. Style 및 Class 이름을 설정하는 방법을 알아야 합니다.

Style을 적용할 때는 객체를 만들어줘서 사용하고, 객체 안에는 CamelCase를 이용합니다. 

function App() {
    const style = {
        backgroundColor: 'black',
        color : 'aqua',
        fontSize: 24,
        padding: '1rem'
    };
    return (
        <> 
    		<Hello />
        	<div style={style}>{name}</div> 
    	</>
    ); 
}

 

기존 JavaScript에서는 class="blabla" 이런 식으로 Class 이름을 설정해줬지만 React에서는 className을 사용해야 합니다.

 

간단하게 CSS 클래스를 적용시키는 법을 알아보겠습니다. 

import './App.css';

function App() {
    const style = {
        backgroundColor: 'black',
        color : 'aqua',
        fontSize: 24,
        padding: '1rem'
    };
    return (
        <> 
    		<Hello />
        	<div style={style}>{name}</div> 
        	<div className="gray-box"></div> 
    	</>
    ); 
}

App.css안에 있는 .gray-box 클래스 css를 적용시키는 모습입니다. 

className으로 작성하는 것을 잊으면 안 됩니다. 

 

 

5. jsx안에서 주석을 작성하는 방법입니다.

import './App.css';

function App() {
    const style = {
        backgroundColor: 'black',
        color : 'aqua',
        fontSize: 24,
        padding: '1rem'
    };
    return (
        <> 
        {/* 어쩌구 저쩌구 주석~~*/}
    		<Hello
                // 이것도 주석입니다~~ 태그는 열리는 부분에서 작성할 것!
                />
        	<div style={style}>{name}</div> 
        	<div className="gray-box"></div> 
    	</>
    ); 
}

1. { /* ~~~~~~ */}

 

2. 태그가 열리는 부분에서 // 사용도 가능합니다. 

 

 

 

 

 

 

참고 강의

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스