[React] 개요 & JS와 차이점

📝 개요

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

• React는 선언적이고, 효율적이고, 유연하다.
• 컴포넌트(Component)라는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.

💡 React를 왜 사용할까 ?

무엇보다, 동적(Dynamic)인 웹페이지를 만들기 위해서이다.
웹 페이지는 각 페이지마다 페이지를 관리해줘야 하고, 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 한다.

한 마디로, React를 사용하는 이유를 정리하자면,,

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

---

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

💡 React 파일 구조

[ 출처 : elice ]

---

📝 React 와 자바스크립트의 차이점

React는 앱 작성 방식을 정의하는 라이브러리다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른  UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.

반면 자바스크립트는 규칙을 설정하지 않는 스크립트언어이기 때문에, 이러한 순수 자바스크립트로 작성된 앱은 자유로울수는 있지만, 그만큼 정해진 것이 없기 때문에, 코드를 작성하다 길을 잃어버리기 쉽다.

이 둘의 대표적인 차이점을 잠깐 정리하자.

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

• JS에서는 보통 다음과 같이 HTML을 요소를 구현한다. 따로 추가적인 코드가 필요하지 않는다.

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

• 반면 React는 JSX로 반환되는 컴포넌트를 통해 UI를 정의한다.
• JSX는 HTML 처럼 보이지만, 실제로는, 자바스크립트다.

/*
다음은 GroceryList 라는 컴포넌트는 
이후 React DOM 라이브러리에 의해 "랜더링(Rendering)"되어 화면에 출력될 수 있다.
*/

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

 

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

• JS는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없다.
  기본적인 출력은 HTML 파일에 정의한다.

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

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

function addItemToList() {

  // Add item

}

이렇게 작성되어야 하는 이유는 관심사 분리 원칙에 따라, 화면에 출력을 하는 HTML과 기능을 구현하는 자바스크립트가 분리되도록 설계하였기 때문이다.
하지만 이러한 방식은, 앱이 점차 방대해지고, 복잡해짐에 따라, 컨트롤 하기 어려울 수 있다.

• 반면, 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>
    )
};

이렇게 사용하면, 앱이 방대해지고, 복잡해져도, 쉽게 이해할 수 있고, 만들어 놓은 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능해진다.

 

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

• JS에서는 사용자 데이터는 일반적으로 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는 사용자의 입력을 기반으로 자신의 상태(State)를 관리하고, 업데이트 하는 제어 컴포넌트를 이용해 사용자 입력 시, 자바스크립트 객체의 텍스트 값을 설정한다. 이를 위해 먼저 상태를 정의해야 한다.

const [itemInput, setItemInput] = useState("");		// 형식 확인하기

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

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

하지만, 자바스크립트에서는 다음과 같이, 간단하게 텍스트 박스의 현재 값을 훨씬 쉽게 알 수 있다.

console.log(itemInput);

현재 앱의 상태(State)를 저장하기 위해 DOM에 의존하지 않음으로써, React가 사용자 데이터를 관리하는 이점은 앱이 성장할수록(커질수록) 그 효과는 커진다.

자바스크립트 변수에 앱의 상태를 저장하는 것은 React가 자바스크립트에 비해 얻을 수 있는 가장 큰 이점 중 하나이며 앱이 복잡할수록 해당 이점이 커진다.

 

💡 4. UI 업데이트 방법

마지막은, 이벤트 발생 시, 앱이 사용자에 반응하는 방식과 새로운 변경 사항을 반영하는 UI 업데이트 방식이다.

• JS에서는 텍스트 박스 옆에 다음처럼 버튼을 추가할 수 있다.

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

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

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

그리고, 그 버튼에 click listener를 설정한다.

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

  // Append item

})

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

• 반면, React는 자바스크립트 변수의 전체 상태를 유지한다.

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

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

// 형식, 확인하기

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

그런 다음, 버튼을 누르는 기능을 정의한다. click listener는 필요하지 않고, onClick 버튼 자체에 속성을 추가 할 수 있다.

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

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

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

이로써, React는 목록이 변경되었음을 자동으로, 등록하고, UI를 자동으로 업데이트한다.

이 업데이트 기능은 React가 가진, 위대함 중 하나이다.