리액트를 왜 쓰는가?

리액트의 단방향 데이터 바인딩 이해하기

1. 데이터 바인딩이란?

데이터 바인딩은 View(화면에 보여지는 데이터)와 Model(브라우저 메모리에 있는 데이터)을 묶어, 한쪽의 값이 변하면 다른 한쪽도 변하게 만드는 방식입니다. 이를 통해 개발자가 일일이 DOM을 수정할 필요 없이, 변경 사항이 바로 적용됩니다.

2. 데이터 바인딩의 종류

• 단방향 데이터 바인딩 (One-Way Data Binding): 데이터가 한 방향으로만 흐르며, 주로 부모에서 자식 컴포넌트로 전달됩니다. 리액트가 대표적입니다.
• 양방향 데이터 바인딩 (Two-Way Data Binding): 데이터가 양방향으로 흐르며, 변경된 값이 즉시 반영됩니다. Angular가 대표적입니다.

3. 리액트의 단방향 데이터 바인딩

리액트는 단방향 데이터 바인딩을 사용하여 명시적으로 데이터를 전달합니다. 데이터는 부모에서 자식 컴포넌트로만 흐르고, 상태 변화는 명시적인 함수(ex. setName)를 통해 이루어집니다.

• 명시적 데이터 변화: 상태 변화는 명시적 함수(setName 등)를 통해 이루어져, 직관적이고 오류를 찾기 쉽습니다.
• 데이터 흐름: 부모 -> 자식 방향으로만 전달되어, 데이터 흐름이 예측 가능하고 관리하기 쉽습니다.

• 

4. Angular와의 비교: 양방향 데이터 바인딩

Angular는 양방향 데이터 바인딩을 사용합니다. HTML에서 바로 JS 객체 값을 변경할 수 있으나, 코드가 직관적이지 않고 변경된 DOM을 찾기 어려워 오류를 찾기 힘듭니다.

5. 리액트의 장점

• JSX 사용: 자바스크립트와 HTML을 결합한 JSX 구조를 사용하여, 컴포넌트 기반으로 개발이 가능합니다.
• 예측 가능한 데이터 흐름: 데이터의 흐름이 명확해 예측하기 쉽습니다.
• 독립적인 컴포넌트 개발: 컴포넌트 단위로 개발하여 재사용성을 높입니다.
• 쉽게 익히기 가능: HTML과 JS만 알면 빠르게 배울 수 있습니다.

6. 리액트의 초기 평가와 변화

리액트는 처음부터 긍정적인 평가를 받지 않았습니다. 이유는 다음과 같습니다:

1. JSX의 반발: JS와 HTML의 역할이 분리된 구조가 기존 개발자들에게는 낯설었습니다.
2. 단방향 바인딩의 어색함: 기존 양방향 바인딩 방식에 비해 코드 작성이 어렵게 느껴졌습니다. 하지만 단방향 바인딩 방식은 데이터의 흐름을 명확하게 하여 오류를 찾기 쉽습니다.
3. 관심사 기반의 분리: 기존의 HTML, JS, CSS 분리 방식에서 관심사에 따라 JSX + CSS로 분리되는 컴포넌트 기반 구조로 변화하였습니다.

7. 리액트를 사용하는 이유

리액트는 명시적이고 선언적인 코드를 통해 예측 가능한 데이터 흐름과 독립적인 컴포넌트 개발이 가능합니다. 이는 컨트롤러 코드의 양을 줄이고, 유지보수를 용이하게 만듭니다.