[React] React란 무엇인가

유진·2023년 10월 28일

React

리액트

목록 보기

1/8

📝 React란?

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

🎯 React의 특징

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

🤷‍♀️ React를 왜 사용해야 할까?

React이외에도 HTML과 CSS, Javascript, Jquery 등 다양한 방법으로 얼마든지 제작이 가능하지만, 요즘 같은 복잡한 동적인 웹페이지를 만드는 시대에는 다릅니다.

웹 페이지는 각 페이지마다 페이지를 관리해줘야 하고, 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 하기 때문에 기존 방식으로 관리하기는 어렵습니다. 그러나 React는 동적 UI를 구축하기 위해 만들어진 라이브러리로 이런 어려움을 해결해줍니다. 이미 페이스북에서 적용해 증명이 되었고 요즘은 React를 Airbnb와 Netflix에서도 사용하면서 점점 생태계가 커지고 있습니다.

즉, React를 사용하는 이유들을 정리하면 “사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다”라고 말할 수 있습니다.

📈 React의 장점

React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높입니다.

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

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

React는 앱 작성 방식을 정의하는 라이브러리입니다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행합니다. 반면 자바스크립트는 규칙을 설정하지 않는 스크립트 언어라고 할 수 있습니다. 따라서 이러한 라이브러리 없이 작성된 앱은 더 자유로울수는 있지만, 정해진 것이 없기 때문에 코드가 복잡해질 수 있습니다.

1) 사용자 인터페이스

자바스크립트

<div>
    <h1>회원 목록</h1>
    <ul>
        <li>Lee</li>
        <li>Kim</li>
        <li>Park</li>
    </ul>
</div>

자바스크립트에서 사용자 인터페이스는 보통 HTML을 통해 구현합니다. 이 때 자바스크립트는 따로 추가적인 코드가 필요하지 않습니다.

React

function MemberList(props) {
    return (
        <div>
            <h1>회원 목록</h1>
            <ul>
                <li>Lee</li>
                <li>Kim</li>
                <li>Park</li>
            </ul>
        </div>
    )
};

React는 JSX로 반환되는 컴포넌트를 통해 UI를 정의합니다. JSX는 HTML처럼 보이지만 실제로는 자바스크립트입니다. 위에 생성된 MemberList 컴포넌트는 이후 ReactDOM 라이브러리에 의해 렌더링되어 화면에 출력될 수 있습니다.

2) 기능 분할

자바스크립트

<div>
    <h1>회원 목록</h1>
    <ul id="member-list">
        <li>Lee</li>
        <li>Kim</li>
        <li>Park</li>
    </ul>
</div>

function addMember() {		//자바스크립트 파일에 목록을 업데이트하는 코드 작성
  ...
}

자바스크립트 앱에서는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없습니다. 기본적인 출력은 HTML 파일에 정의합니다.

코드가 이렇게 작성되어야 하는 이유는 관심사 분리 원칙에 따라 화면에 출력을 하는 HTML과 기능을 구현하는 자바스크립트가 분리되도록 설계하였기 때문입니다. 하지만 이러한 방식은 앱이 복잡해짐에 따라 문제가 생길 수 있습니다. 왜냐하면 하나의 HTML을 구성하는 코드가 서로 다른 자바스크립트 파일에 있을 수 있기 때문에 HTML의 기능이 구현된 코드가 위치한 곳을 기억하기 어렵기 때문입니다.

React

function MemberList(props) {
    function addItem() {
        ...
    }
 
    return (
        <div>
            <h1>회원 목록</h1>
            <ul>
                <li>Lee</li>
                <li>Kim</li>
                <li>Park</li>
            </ul>
        </div>
    )
};

React를 이용하면 기능을 구현하는데 필요한 코드를 하나의 파일로 유지할 수 있습니다.
이렇게 하면 앱이 복잡해 지더라도 쉽게 이해할 수 있고 만들어 놓은 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능해집니다.

3) 브라우저에 데이터 저장

자바스크립트

// HTML
<input type="text" id="input-member" />
  
//JS
const input = document.getElementById("input-member");
console.log(input.value);

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

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

이는 보기에 편리해보이지만 만약 id가 바뀌게 되면 해당 id를 사용하는 모든 코드를 다시 수정해야 하기 때문에 관리하기가 번거롭습니다.

React

const [member, setMember] = useState("");

<input type="text" value={member} onChange={e => setMember(e.target.value)}

console.log(member);

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

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

하지만 위와 같이 설정 후에는 코드를 이용해 텍스트 박스의 현재 값을 훨씬 쉽게 알 수 있습니다.

id를 별도로 관리할 필요가 없어 코드를 관리하기가 편리합니다. 현재 앱의 상태를 저장하기 위해 DOM에 의존하지 않음으로써 React가 사용자 데이터를 관리할 수 있습니다. 자바스크립트 변수에 앱의 상태를 저장하는 것은 React가 자바스크립트에 비해 얻을 수 있는 가장 큰 이점 중 하나이며 앱이 복잡할수록 해당 이점이 커집니다.

4) UI 업데이트

자바스크립트

<input type="text" id="member" /> <button id="add-button">회원 추가</button>

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

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

자바스크립트에서 텍스트 박스 옆에 버튼을 추가할 수 있습니다. 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾습니다. 그리고 버튼에 click 리스너를 설정합니다.

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

React

const [members, setMembers] = useState(["Lee", "Kim", "Park"]);

<ul>
    {members.map(member => (
        <li key={member}>{member}</li>
    ))}
</ul>

<button onClick={addMember}>회원 추가</button>

function addMember() { setMembers([...members, "새로운 회원"]); }