React 기초 및 프로젝트 생성

React란?

사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리. React는 선언적이고 효율적이며 유연하다. 또한 React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.

• UI를 구성하기 위해 ‘Component'라는 단위로 개발을 진행한다
• React는 내부적으로 Virtual DOM을 통해 렌더링을 진행한 뒤 변경점만 사용자 화면에 변경한다.
• 개발 효율을 위해 JSX(HTML 환경과 유사)를 이용해 컴포넌트를 개발한다.

등장배경

React를 개발하기 전에는 페이스북은 성능이 좋은 동적 UI를 구축하는 과제에 직면했다. 예를 들어 사용자가 채팅하는 동시에 뉴스 피드 업데이트가 이루어지길 원했다. 이를 위해 페이스북은 개발 프로세스 최적화를 해야 했고 그에 따라 자바스크립트를 사용하기로 했다. 그리고 페이스북 마크업 구문인 XHP를 자바스크립트에 넣을 것을 제안했다. 이것은 불가능해 보였지만 2011년 페이스북은 자바스크립트와 XHP 공생을 기반으로 React 라이브러리를 출시했다. React는 2013년 오픈 소스화 되었으며 다른 어떤 도구보다 빠르게 동작한다.

왜 React를 사용하면 좋은가?

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

파일 구조

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

웹 앱 변화에 대응하여 프로세스 속도를 높이기 위해 React가 등장한 배경에 대해 확인했다. 그렇다면 React와 JavaScript의 차이점이 무엇인지, 왜 굳이 React를 사용하는지에 대해 알아본다.

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

function MemberList(props){
  function addItem(){
    ... // 기능을 한 곳에 합칠 수 있음
  }
  return(
    <div>
      <h1>회원 목록</h1>
      <ul>
        <li>member01</li>
        <li>member02</li>
      </ul>
    </div>
  )
}

React는 JSX로 반환되는 컴포넌트를 통해 UI를 정의한다. JSX는 HTML처럼 보이지만 실제로는 자바스크립트. MemberList 컴포넌트는 이후 ReactDOM 라이브러리에 의해 렌더링되어 화면에 출력된다.
앱이 복잡해지더라도 쉽게 이해 가능하며 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능해진다.

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

자바스크립트

자바스크립트에서 사용자 데이터는 일반적으로 DOM(문서 객체 모델)에 저장된다. DOM은 브라우저 자체에서 만들고 유지 관리하며 전체 HTML을 나타낸다.

<input type="text" id="input-member" />
// 텍스트 박스를 정의하고 사용자가 입력하면 해당 내용이 브라우저에 저장된다.

const input = document.getElementById("input-member");
console.log(input.value);
// 사용자가 값을 입력할 때 개발자가 먼저 DOM에서 값을 찾고 해당 입력 상자에 값을 수동으로 입력
// id가 바뀌게 되면 id가 사용된 모든 코드 다시 수정해야함

React

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

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

<input type="text" value={member} onChange={e => setMember(e.target.value)}
// 변수에 앱의 상태를 저장하는 것, 앱의 상태를 저장하기 위해 DOM에 의존하지 않아도 됨.
console.log(member);

2. UI 업데이트 방식

React는 이벤트 발생 시 앱이 사용자 반응에 따라 새로운 변경 사항을 반영한다.

자바스크립트

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

const addButton = document.getElementById("add-button");
// 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾는다
addButton.addEventListener("click", function() {
  ...
}) // 그리고 click 리스너를 설정, 다시 목록을 찾고 새 항목을 만들어 마지막 목록 끝에 추가해야함.

React

const [members, setMembers] = useState(["차은우", "원빈", "손석구"])
// 변수의 각 항목을 매핑한 후 그에 대한 목록 요소를 반환하여 JSX에 표시
  
<ul>
  {members.map(member= (
    <li key={member}>{member}</li>
  ))}
</ul>

<button onClick={addMember}>회원 추가</button>
// 클릭 리스너 없이, onClick 버튼 자체에 속성 추가

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

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

이미지 출처 : 엘리스 트랙