[React] 1주차 - React 소개/컴포넌트/JSX/프로젝트 생성

smjan27·2021년 10월 9일

React

목록 보기

1/6

React란?

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

만들어진 배경 / React의 특징

웹 애플리케이션의 규모가 커지면, DOM을 직접 건드리면서 작업하면 코드가 난잡해지기 쉽다.
*DOM (Document Object Model): html 문서의 계층적 구조와 정보를 표현 및 제어하는 트리

그래서 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다. 이들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결하여 업데이트 하는 작업을 간소화하는 방식으로 웹 개발의 어려움을 해결해 주었다.

하지만 React의 경우에는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든 것을 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었다.

React에서는 Virtual DOM을 사용해서 속도를 개선했다. Virtual DOM은 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로, JavaScript의 객체이기 때문에 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다.

React는 상태가 업데이트되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링한다. 그리고 비교 알고리즘을 통해 실제 브라우저에 보여지고 있는 DOM과 비교한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM에 패치한다.
*렌더링(Rendering): html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것

컴포넌트(Component)

속성을 나타내는 props를 input으로 하고, UI가 어떻게 보여야 하는지 정의하는 React 엘리먼트를 output으로 하는 함수

알파벳 대문자로 시작
리액트 컴포넌트는 함수 또는 클래스 형태로 작성 가능
쉽게 재사용 가능

JSX / 엘리먼트(Element)

const element = <h1>Hello, world!</h1>;

JSX는 JavaScript를 확장한 문법으로, React 엘리먼트(element)를 생성한다. HTML과 비슷한 문법으로 작성할 수 있다.

엘리먼트: React 앱의 가장 작은 단위로, 화면에 표시할 내용을 기술한다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.
자바스크립트의 값을 JSX 안에서 렌더링할 수 있다.
태그의 요소 표현 방법이 다름에 유의! class 대신 className, font-size 대신 fontSize 등..
하나의 태그만 만들 수 있음 (<div> 태그로 감싸기)

import React from 'react';

function App() {
    const name = 'React';
    return (
      	<div className="black-nav">
    	    <h1>{name}</h1> // <- 이런 식으로!
            <h2>test</h2>
        </div>
    );
}

export default App;