왜 리액트인가 ?

2025년 03월 25일

2011년 페이스북에서 처음 선보인 리액트는 출시된 지 10년이 넘은 지금, 프론트엔드 생태계에서 오랜 명맥을 이어가는 라이브러리로 자리 잡았다. 대부분의 채용시장에서 리액트에 대한 개발 경험을 요구하고, 정부의 프로젝트에서도 리액트를 채택했다.
왜 리액트가 지난 몇 년간 많은 개발자들이 선호하는 라이브러리가 됐을까 ?

1. 명시적인 상태 변경

단방향 바인딩 지원
상태가 변화한다면 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 됨
양방향 바인딩에 비해 데이터 흐름의 변화가 단순 → 코드 읽기 쉽고 버그 가능성 비교적 적음
but, 항상 변화를 감지하고 업데이트 하는 코드 작성해야 함 -> 코드의 규모 증가

아래 예시에서 name의 변화는 setName의 함수 호출로만으로 일어나고, name이 변경되는 이유를 찾기 위해선 setName이 호출되는 곳 찾으면 된다.

function App() {
  const [name, setName] = useState('');
 
  function onChange(e) {
    setName(e.target.value);
  }
 
  return <input type="text" value={name} />;
}

여기서, 바인딩이란 무엇일까 ?

바인딩이란 ?

바인딩(Binding)은 모델의 데이터와 뷰를 연결하는 것이다. 프론트엔드 화면이 대부분 상태에 따라 그려지기 때문에, 이 상태를 뷰와 어떻게 동기화할 것인가가 바로 바인딩의 핵심이다.

데이터 바인딩은 흐름의 방향에 따라 단방향 바인딩(One-way Data Binding)과 양방향 바인딩(Two-way Data Binding)으로 나뉜다.
단방향 바인딩은 데이터가 한쪽 방향(모델 → 뷰)으로만 흐르며, 양방향 바인딩은 모델과 뷰가 서로 연결되어 변경 사항이 자동으로 동기화된다.

data-binding

단방향 바인딩

위에서 언급한 것처럼, 리액트는 단방향 바인딩 구조를 사용한다.
모델 -> 뷰의 단방향으로만 데이터를 동기화하는 것을 의미한다.

만약 뷰에서 변화가 발생한다면 이는 명시적인 이벤트 핸들링으로 다시 모델에 반영된다. 아래 예시에서 사용자의 입력은 onChange와 같은 이벤트 핸들러를 통해 모델을 명시적으로 업데이트해야 한다.

function Example() {
  const [value, setValue] = useState('');
 
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)} // 사용자 입력 → Model
    />
  );
}

또한, 컴포넌트 간에서 단방향 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다.

양방향 바인딩

반대로 양방향 바인딩은 모델과 뷰가 연결되어 둘 중 하나가 변경되면 다른 하나도 함께 변경된다. 규모가 커질수록 데이터 흐름 추적이 어려워질 수 있고, 예측하지 못한 상태 변경으로 디버깅이 복잡해질 수 있다. 양방향 바인딩을 사용하는 대표적 프레임워크로는 Vue, Angular가 존재한다.

왜 리액트는 단방향 바인딩을 선택했을까 ? (단방향 바인딩의 장점)

데이터 흐름이 한 방향이기 때문에 상태 변화 추적이 쉽고 버그가 적다.
부모 -> 자식 방향으로만 props가 전달되는 구조로 컴포넌트 설계가 명확하고 데이터 추적이 쉽다.
뷰는 항상 특정 상태에 의해 결정되므로, 애플리케이션의 동작을 예측하기 쉽고 테스트가 용이하다.

2. JSX(Javascript XML)

HTML에 자바스크립트 문법을 더한 JSX 사용

아래는 조건부 렌더링을 구현하는 리액트의 코드. 자바스크립트 문법 친화적으로, 자바스크립트 문법을 로 감싸야 한다는 사실만 알면 된다.
(Angular의 경우, Angular에서만 사용되는 전용 문법을 익혀야 한다.)

{
  condition ? <div>Content</div> : null;
}

3. 비교적 배우기 쉬움

앞서 언급한 특징으로 리액트를 처음 접하는 사람들도 HTML과 자바스크립트에 대해 어느정도 알고 있다면 빠르고 쉽게 컴포넌트나 웹페이지를 만들 수 있음.

4. 강력한 커뮤니티와 메타의 지원

개발자들이 리액트를 사용하며 겪은 많은 이슈와 문제를 공유하며 커다란 커뮤니티가 형성되었고, 메타의 적극적인 지원으로 꾸준히 성장해옴.

참고자료

모던 리액트 Deep Dive 들어가며 참조
이미지 출처: https://handsontable.com/blog/understanding-data-binding-in-react