본문 바로가기
Front_end/React

웹 프론트엔드 - React

by nomfang 2021. 1. 27.
728x90
반응형

React란?

React(리액트)란 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리

1.선언적

2.효율적

3.유연성

React의 컴포넌트(component) 요소로 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다

등장 배경

페이스북은 성능이 좋은 동적 UI를 구축하는 과제에 직면

사용자가 채팅하는 동시에 뉴스 피드 업데이트가 이루어지길 원하는등

이를 위해 페이스북은 개발 프로세스 최적화, 자바스크립트를 사용하기로 결정

페이스북 마크업 구문인 XHP를 자바스크립트에 넣을 것을 제안

2011년에 페이스북은 자바스크립트와 XHP 공생을 기반으로 React 라이브러리를 출시

React는 2013년 오픈 소스화되었으며 다른 어떤 도구보다 빠르게 동작한다

왜 React를 사용해야 할까?

프론트엔드(Front-end)를 만드는 라이브러리는 상당히 많다

HTML과 CSS, Javascript, Jquery 등 다양한 방법으로 얼마든지 제작이 가능

하지만, 요즘 같은 복잡한 동적인 웹페이지를 만드는 시대에는 React가 좋다

웹 페이지는 각 페이지마다 페이지를 관리해줘야 하고, 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 함

기존 방식으로는 관리하기 어렵다

사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다

장점

  • React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도 향상 Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍
  • React 컴포넌트의 재사용은 개발 시간 절약
  • 단방향 데이터 흐름을 통해 안정적인 코드를 제공, 단방향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미
  • 오픈 소스이며 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개
  • Hooks를 이용해 컴포넌트의 상태를 쉽게 관리
  • 여러 개발 도구를 지원. 크롬에서는 React Developer Tools라는 확장 프로그램을 제공

파일 구조

출처:엘리스 코딩

React 공식 문서

 

DOM(Document Object Model)이란 HTML 요소들을 노드로 포함하는 트리와 같은 구조

CDN(Contents Delivery Network)은 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술

CDN의 장점.

  • 온라인 콘텐츠를 빠르게 전송 가능
  • 시스템을 정상적으로 사용가능한 정도(가용성) 높음
  • 외부의 다양한 공격을 방지

CDN은 index.html의  <head>태그 내에 crossorigin 속성 이용

<head> 

<script crossorigin src="주소"></script> 

</head>

자바스크립트와의 차이점

웹 앱 변화에 대응하여 프로세스 속도를 높이기 위해 React가 등장

React와 자바스크립트의 차이점이 무엇인지, 왜 굳이 React를 사용하는지

React는 앱 작성 방식을 정의하는 라이브러리

  • 데이터가 앱에 사용되는 방식과 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행

자바스크립트는 규칙을 설정하지 않는 스크립트 언어

따라서 이러한 라이브러리 없이 작성된 앱은 더 자유로울수는 있지만, 정해진 것이 없기 때문에 코드를 작성하다가 길을 잃어버리기 쉽습니다.

 

 

React와 자바스크립트의 차이점 4가지

사용자 인터페이스를 처음 만드는 방법

자바스크립트

따로 추가적인 코드가 필요하지 않다

 

<div>
    <h1>Grocery List</h1>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

 

React

 JSX로 반환되는 컴포넌트를 통해 UI를 정의

JSX는 HTML처럼 보이지만 실제로는 자바스크립트

아래에서 생성된 GroceryList 컴포넌트는 이후 ReactDOM 라이브러리에 의해 렌더링되어 화면에 출력될 수 있음

 

function GroceryList(props) {
    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

앱에서 기능이 분할되는 방식

자바스크립트

앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없다

기본적인 출력은 아래처럼 기본 HTML 파일에 정의

 

<div>
    <h1>Grocery List</h1>
    <ul id="grocery-list">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

 

그리고 목록을 업데이트하는 코드를 자바스크립트 파일에 넣어야 한다

 

function addItemToList() {

  // Add item

}

 

코드가 이렇게 작성되어야 하는 이유는 관심사 분리 원칙에 따라 화면에 출력을 하는 HTML과 기능을 구현하는 자바스크립트가 분리되도록 설계하였기 때문

이러한 방식은 앱이 복잡해짐에 따라 더 복잡성이 높아짐

왜하나의 HTML을 구성하는 코드가 서로 다른 자바스크립트 파일에 있을 수 있기 때문에 HTML의 기능이 구현된 코드가 위치한 곳을 기억하기 어렵기 때문

 

React

React를 이용하면 위의 기능을 구현하는데 필요한 코드를 하나의 파일로 유지할 수 있다

 

function GroceryList(props) {
    function addItem() {
        // Add Item
    }

    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

 

앱이 복잡해 지더라도 쉽게 이해할 수 있고 만들어 놓은 컴포넌트를 앱 전체가 공유하여 코드의 재사용이 가능

 

브라우저에 데이터가 저장되는 방법

자바스크립트자바스크립트에서 사용자 데이터는 일반적으로 DOM(문서 객체 모델)에 저장됩니다. DOM은 브라우저 자체에서 만들고 유지 관리하며 전체 HTML을 나타냅니다. 예를 들어 자바스크립트에서는 아래와 같이 텍스트 박스를 정의하고 사용자가 입력하면 해당 내용이 브라우저에 저장됩니다.

<input type="text" placeholder="Enter an item" id="item-input" />

그리고 사용자가 값을 입력할 때 개발자가 먼저 DOM에서 값을 찾은 다음 추출하여 해당 입력 상자에 값을 수동으로 입력합니다.

const input = document.getElementById("item-input"); console.log(input.value);

이는 보기에 편리해보이지만 입력이 여러 개일 때 문제가 될 수 있습니다. 만약 **id**가 다른 입력 텍스트 박스가 여러 개라면 **id**별로 자바스크립트 코드를 모두 관리해야 합니다.

 

React반면 React는 사용자의 입력을 기반으로 자신의 상태를 관리하고 업데이트 하는 제어 컴포넌트를 이용해 사용자 입력 시 자바스크립트 객체의 텍스트 값을 설정합니다. 이를 위해 먼저 상태를 정의해야 합니다.

const [itemInput, setItemInput] = useState("");

입력이 변경될 때마다 설정이 되어야 하므로 HTML 코드는 조금 복잡해질 수 있습니다.

 

<input type="text" placeholder="Enter an item" value={itemInput} onChange={e => setItemInput(e.target.value)}

하지만 자바스크립트에서는 아래 코드를 이용해 텍스트 박스의 현재 값을 훨씬 쉽게 알 수 있습니다.

console.log(itemInput);

현재 앱의 상태를 저장하기 위해 DOM에 의존하지 않음으로써 React가 사용자 데이터를 관리하는 이점은 앱이 성장할수록 누적됩니다. 자바스크립트 변수에 앱의 상태를 저장하는 것은 React가 자바스크립트에 비해 얻을 수 있는 가장 큰 이점 중 하나이며 앱이 복잡할수록 해당 이점이 커집니다.

UI 업데이트 방법

React와 자바스크립트의 마지막 차이점은 이벤트 발생 시 앱이 사용자에 반응하는 방식과 새로운 변경 사항을 반영하는 UI 업데이트 방식입니다.

자바스크립트자바스크립트에서 텍스트 박스 옆에 다음처럼 버튼을 추가할 수 있습니다.

<input type="text" placeholder="Enter an item" id="item-input" /> <button id="add-button">Add</button>

그런 다음 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾습니다.

const addButton = document.getElementById("add-button");

그리고 버튼에 click 리스너를 설정합니다.

addButton.addEventListener("click", function() {

  // Append item

})

그런 다음 리스너 내부에서 먼저 이전과 동일한 방법을 사용하여 입력 상자의 값을 가져올 수 있습니다. 그런 다음 식료품 목록에 새 항목을 추가하려면 DOM에서 목록을 찾고 추가 할 새 항목을 만든 다음 마지막으로 목록 끝에 추가해야합니다. 이것은 상당히 복잡합니다.

React반면 React 앱은 자바스크립트 변수의 전체 상태를 유지합니다.

const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);

그리고 변수의 각 항목을 매핑한 후 그에 대한 목록 요소를 반환하여 JSX에 표시합니다.

<ul> {items.map(item => ( <li key={item}>{item}</li> ))} </ul>

<ul>
    {items.map(item => (
        <li key={item}>{item}</li>
    ))}
</ul>

그런 다음 버튼을 누르는 기능을 정의합니다. 클릭 리스너는 필요하지 않고 onClick 버튼 자체에 속성을 추가 할 수 있습니다.

<button onClick={addItem}>Add React</button>

이 함수에 추가할 것은 setItems 함수를 사용하여 기존 항목에 새 항목을 추가하는 것입니다.

function addItem() { console.log(itemInput); setItems([...items, itemInput]); }

이로써 React는 목록이 변경되었음을 자동으로 등록하고 UI를 자동으로 업데이트합니다. 이 업데이트 기능은 React가 가진 위대함 중 하나입니다.

반응형
저작자표시 비영리 변경금지

'Front_end > React' 카테고리의 다른 글

React) select, option로 셀렉트 메뉴 사용  (0) 2022.03.22
react) 리액트는 무얼 하고 왜 쓰는가  (0) 2021.07.23
React) react-dom, Babel, state  (0) 2021.06.30
React) props  (0) 2021.06.29
React) 리액트 컴포넌트  (0) 2021.06.29

댓글

티스토리툴바