서재(書齋)

What happend?

서비스에 Drag & Drop 기능이 필요하여 react-beautiful-dnd 라이브러리를 사용해 Component를 구현하였다.

DragDropContext와 Droppable을 합쳐 하나로, Draggable을 또 다른 하나로 해서 2개 컴포넌트로 분리했다.

리팩토링을 하던 중, 기존에는 발생하지 않던 Warning이 반복적으로 발생하였다.

DragDropUserAttrCard는 사용자가 직접 눌러서 드래그 앤 드롭을 할 컴포넌트(Draggable)인데, 아래와 같이 분리한 해당 컴포넌트 내에는 분명히 key가 존재하는데도 계속 Warning이 발생하였다.

What went wrong?

Key는 분리한 컴포넌트 내부가 아니라, 외부에서 할당해야 오류가 해결되었다.

내가 Customizing한 Draggable인 DragDropUserAttrCard가 사용되는 부분에 key를 선언해야 한다.

또 하나, 나는 이 key가 prop인 줄 알고 그대로 받아서 DragDropUserAttrCard 내부에서 다시 한 번 key를 할당했으나, 그렇게 하면 key는 prop이 아니라는 오류가 떴다.

아무리 생각해도 이상해서 DragDropUserAttrCard 선언 시 key를 이상한 값으로 넣어보고 생성된 html을 살펴보니, 해당 key값은 렌더링 시 사용되지 않는 것 같았다.

Lesson & Learned

• react-beautiful-dnd 라이브러리 사용 시, Draggable 컴포넌트의 key prop은 크게 의미가 없으며, 렌더링 시 사용되는 Unique한 구분자는 draggable-id이다.
• 다만 react를 일반 html로 컴파일 시, 해당 라이브러리의 Droppable이나 Draggable과 같은 컴포넌트들이 각각 ul와 li와 같은 html 컴포넌트로 변환되는 과정에서 ul과 li에 필요한 key 속성을 Draggable에 반드시 입력해주어야 하는 것으로 보인다.
• 이 때, Draggable 영역을 따로 묶어 별도 컴포넌트를 만들었다면, 해당 컴포넌트 소스 코드 내부가 아닌, 컴포넌트를 선언해 사용하는 상위 컴포넌트에서 key를 할당해주어야 한다.

끝.

어떻게 보면 가장 문외한이라 할 수 있는 FE 영역을 공부하려 하는데, 자꾸만 프레임웤(이 아니라 사실 React는 라이브러리라고 하지만 혼용된 의미로 사용되는 것 같다. 일단은 사전 제공되는 규모의 차이니 둘 다 프레임워크라 하기로...) 선택에 시간이 소요되고 있다.

많은 영상을 참고해 보면 둘 다 배우라는 이야기가 많지만, 나는 BE 뿐 아니라 DB도 신경써야 하고 서비스 자체를 기획해야 하는 입장에서 컨텐츠/디자인 영역에 소요될 시간이 더 많을 것 같아서 둘 중 하나를 선택해서 배워야 하는 입장이다.

혼자 끙끙 앓으며 고민하기보다는 두 기술에 대해 잘 설명되어 있는 유튜브 영상을 참고하여 프론트에 대한 이해도 할 겸, 선택에 대한 근거를 좀 쌓아두려고 한다.

참고한 자료는 아래 '큰돌의터전'님 유튜브 영상이다.

전반적인 특징

프로그래밍 패러다임

Vue.js(이하 Vue라 한다)의 경우, 반응형 프로그래밍으로 특정 요소에 값을 입력하면 watch하고 있다가 특정 변수에 값을 자동으로 입력해 준다고 한다. (Input -> Value)

예를 들어, 텍스트박스에 값을 입력하면 입력된 값을 별도의 할당 함수 없이도 변수가 해당 값을 인지하고 가지고 있을 수 있다.

위와 같은 특성을 가진 라이브러리를 다뤄본 적이 없어서 정확히 어떤 식으로 작동되는지는 알 수 없으나, 영상 내의 예시를 보니 대충 이해가 되었다.

React.js(이하 React라 한다)의 경우, 함수형 프로그래밍으로 setState등의 함수를 활용해 특정 요소에 입력된 값을 이용해 변수의 값을 변경 가능하다. (Input -> function -> Value)

데이터 바인딩

다 까먹어서 가장 이해가 취약한 부분인데... 현재 수준에서 적어보려 한다.

모델과 뷰 간의 데이터 동기화 방식에 대한 차이를 의미하는 것으로, 다른 분이 정리해 주신 내용을 참고하여 이해했다.

(출처 - adjh54님의 Tistory https://adjh54.tistory.com/49)

React가 사용하는 단방향 데이터 바인딩의 경우, 아래 그림과 같이 로직이 존재하는 Model에서 화면을 로딩하는 시점에 View 영역으로 데이터를 제공하고 이를 이용하여 초기값 등을 셋팅한다.

이후 사용자가 View 영역에서 값을 수정하면, onClick 등의 이벤트 함수를 생성하여 이를 다시 Model로 보내준 뒤 각종 로직을 처리하고 DB에 저장 등을 수행하게 된다.

(MVC(Model - View - Controller) 패턴)

Vue가 사용하는(단방향 또한 지원한다) 양방향 데이터 바인딩의 경우, ViewModel 이라는 컴포넌트가 존재하여 View와 Model 컴포넌트의 데이터 변화를 감지하다가, 어느 한 쪽에서 값의 변화가 일어나는 경우 자동으로 다른 컴포넌트에 변화된 값을 동기화해 준다.

(MVVM(Model - View - ViewModel) 패턴)

자유도

자유도의 경우 React가 조금 더 높다고 한다.

타 플러그인 의존도

Vue보다는 React가 타 플러그인 의존도가 높으며, React는 많은 라이브러리를 import 하므로 빌드 시 생성되는 파일의 수도 상대적으로 많다.

Document

공식적으로 제공되는 도큐먼트의 경우 Vue가 조금 더 이해하기 쉽다.

Learning Curve

배우기에는 Vue가 React보다는 조금 더 쉽다고 한다.

성능

성능의 경우 둘 다 준수한 성능을 나타내나, 상대적으로 Vue가 조금 더 우수하다.

각종 프레임워크의 성능을 비교해 놓은 GitHub 링크가 있어 이를 참고하여 설명해 주셨다.

(https://krausest.github.io/js-framework-benchmark/2022/table_chrome_104_windows.html)

기타

커뮤니티의 경우 React가 좀 더 활성화되어 있다.

아무래도 Facebook 진영에서 공식적으로 지원하는 라이브러리이다 보니, 버그 수정도 빠르고 뒷배가 더 든든해서 커밋 수, 포크 수, 기여자 수 등에서 React가 조금 더 앞선 모습을 볼 수 있다.

모바일로서의 확장성의 경우 React는 React-Native라는 너무나 강력한 지원군이 존재하여 NativeScript 등이 존재하는 Vue 진영에 비해 우위에 있다고 할 수 있다.

결론...?

다른 부분은 큰 차이가 없다고 가정하면, 세 가지 포인트 정도가 주된 의사결정 요소가 될 것 같다.

(표에는 없는) 시장 선호도, 러닝커브, (역시 표에는 안 쓴...) 모바일 확장성이다.

시장 선호도는 WorldWide 기준 여전히 React가 높고, 러닝 커브는 Vue가 낮으며, 모바일 확장성은 React가 우위에 있다.

이렇게만 놓고 보면 2대 1로 React의 승리인데... 리액트가 얼마나 배우기 어려운지를 잘 모르겠다...

조금만 더... 고민해보기로 하자...

끝.