[React] React를 왜 만들었을까?

안녕하세요, 개발자 Sean입니다. 

프론트엔드 면접을 보시다보면 아마 많은 분들이 "React는 왜 만든 걸까요?"라는 질문을 받곤 합니다. 

개발에 대해 아무 몰랐던 옛날에는 그냥 어플을 잘 만들려고 만든거 아닌가?라고 생각했는데, 

어느정도 경험이 쌓이고 나서 생각해보니 면접관 분들이 듣고자 하는 대답은 따로 있었던것 같다는 생각이 듭니다. 

 

근데 여기에 대해 React를 만든 개발자가 직접 작성해놓은 글이 있다는 사실 아시나요? ㅎㅎ

오늘은 관련 글을 번역해 옮겨볼까 합니다. 

 

Why did we build React?

이미 수많은 자바스크립트 MVC 프레임워크가 있음에도 불구하고 왜 우리는 리엑트를 만들었으며 왜 리엑트를 사용해야 하는 걸까요?

 

리엑트는 MVC 프레임워크가 아닙니다. 

리엑트는 composable한 UI를 만들기 위한 라이브러리입니다. 이는 시간의 지남에 따라 변화하는 현재의 데이터를 나타내는 재사용가능한 UI 컴포넌트를 생성하는데 용이합니다. 

 

리엑트는 템플릿을 사용하지 않습니다. 

전통적으로 웹 어플리케이션 UI는 템플릿 혹은 HTML directive를 이용해 만들었습니다. 이런 템플릿들은 UI를 만드는 추상성 집합을 모두 독점합니다. (여기서 추상성 집합이 어떤 의미인지는 정확히 모르겠습니다. 개인적인 생각으로는 템플릿을 이용하게 되면 미리 정해진 규칙에 의해서 UI 빌드가 가능하기 때문에 개발자의 자유도에 제약이 생긴다는 의미로 말한 것 같습니다)

 

리엑트는 UI 제작을 컴포넌트 단위로 쪼개는 방식으로 접근합니다. 즉 리엑트는 뷰를 렌더링하기에 완전한 기능을 갖춘 프로그래밍 언어를 사용하게 되고 탬플릿을 사용했을 경우에 대비해 아래와 같은 이점을 얻게 됩니다:

• 자바스크립트는 추상화을 제작할 수 있는 유연하고 강력한 프로그래밍 언어입니다. 이는 큰 규모의 어플리케이션에서 아주 중요합니다. 
• 마크업을 뷰 로직과 결합하여 리엑트는 확장 및 유지보수에 유용합니다. 
• 마크업과 컨텐츠에 대한 이해를 자바스크립트에 녹여내어 수동 문자열 연결이 없어지고 이는 XSS 취약성이 줄어듭니다. 

추가로 우리는 자바스크립트보다 HTML 가독성을 좋아하는 개발자를 위해 문법 확장인 JSX를 만들었습니다.

 

리엑티브한 업데이트는 아주 간단합니다.

리엑트는 데이터가 지속적으로 변화할 때 특히 좋습니다. 

 

전통적으로 자바스크립트 어플에서, 어떤 데이터가 변화하는지를 명령형으로 해당 데이터 변화를 DOM에 반영해야 했습니다. 디렉티브와 데이터 바인딩으로 선언형 인터페이스를 제공하는 AngularJS에서도 DOM 노드를 수동적으로 업데이트해야하는 링크 함수가 필요했습니다.

 

리엑트는 약간 다른 접근법을 선택했습니다. 

 

컴포넌트가 최초로 초기화 했을때, render 메서드가 호출되고 가벼운 형태의 뷰 representation이 생성됩니다. 이 representation으로부터 마크업이 생성되고 다큐먼트에 삽입됩니다. 데이터가 변화하면 render 메서드는 다시 호출됩니다. 업데이트가 가능한 효율적으로 이루어지기 위해 우리는 이전의 반환값과 새로운 반환값을 비교하고 DOM에 적용할 최소한의 변경셋을 생성합니다. 

 

render의 반환값은 스트링 혹은 DOM 노드입니다. 이는 DOM이 어떻게 보여야 하는지 나타내는 가벼운 설명서입니다.

 

우리는 이러한 과정을 reconciliation. 이라고 부릅니다.

 

리렌더링이 너무나도 빠르기 때문에 (TodoMVC의 경우 1ms), 개발자는 일일이 데이터 바인딩을 명시하지 않아도 됩니다. 우리는 이러한 접근법이 어플을 만드는데 더욱 쉽다는 사실을 알았습니다. 

 

HTML은 겨우 시작일 뿐입니다.

리엑트는 자체적으로 가벼운 문서 표현이 가능하기 때문에, 아래와 같은 꽤 멋진 일들을 할 수 있습니다. 

 

페이스북은 HTML대신 <canvas>로 렌더링되는 다이나믹 차트가 있습니다. 

인스타그램은 리엑트와 Backbone.Router로만 만든 싱글 페이지 웹앱입니다. 디자이너는 정기적으로 JSX를 통해 리엑트 코드에 관여합니다. 

웹 작업자에서 리엑트 앱을 실행하고 리엑트를 사용하여 Objective-C 브리지를 통해 기본 iOS 뷰를 구동하는 내부 프로토타입을 구축했습니다.

SEO, 성능, 코드분산 그리고 유연성을 위해 리엑트를 서버에서 사용할 수 있습니다. 

모든 브라우저에서 안정적으로 작동하며 자동적으로 event delegation을 이용합니다.