리액트의 철학

눈팅하던 커뮤니티에서 “생각없이 코딩하는 사람들이 리액트 철학 무시하고 개발” 이라는 표현을 보았다.

그리고 스스로에게 리액트의 철학을 물어보니 대답할 수가 없었고.. ㅎㅎ 나는 생각없이 남들 다 쓰니까 쓰는 기술을 사용하는 사람이 된 것 같았다. 예전에 면접을 볼 때에도 어떤 기술을 왜 썼는지, 그 특징이나 장점이 뭔지에 대해 어버버 거렸던 기억이 떠올라서 원래 쓰려던 글을 미뤄두고 작성해본다.

면접용으로 외울 수는 있겠지만 정말 이런 것을 아는 게 왜 필요할까? 에 대한 내 생각도 정리해보았다.

 

어떤 기술, 예를 들면 리액트를 서비스 관점에서 본다면

다른 제품들이 그러하듯 어떤 문제를 해결하기 위해 나왔다.

그렇다면 그 제품은 해당 문제 해결에 최적화되어 있고 앞으로의 발전 방향도 그에 맞춰져 있을 것이다.

 

그런데 그걸 모르고 제품을 사용한다면 “러닝화 신고 등산하기”와 같이, 동작은 하는데 뭔가 이상한 상황이 올 것이고, 내 옆에 등산화를 신은 사람들은 힘을 덜 들이거나 부상을 덜 입으면서도, 더 빠르게 목표에 도달하지 않을까? 기존 등산화를 더 잘 사용하거나 더 잘 관리할 수 있고, 새로운 등산화를 고르는 안목도 생길 테고.

 

내가 처음에 리액트라는 기술을 선택한 가장 큰 이유는 “(다들 사용하니까) 자료가 많아서” 였다. 이전까지 마이너한 기술을 써서 고통을 받았다는 이유에서였는데, 만약 내가 웹개발을 잘 이해하고 바닐라로 개발했을 때의 불편한 원인을 인지했다면 더 나은 이유로 선택할 수 있었을 것이다.

앞으로는 내가 가진 문제를 가장 잘 해결할 기술을 올바르게 탐색하고 선택할 수 있는 프로세스를 만들고, 안목을 길러야겠다!!

 

 

 

 

김대리. 팡션?

 

리액트란?

React is a JavaScript library for building user interfaces

페이스북(현 Meta)이 개발하여 2013년에 발표한, 웹 개발을 위한 자바스크립트 라이브러리다.

 

Heavy internal usage gives us the confidence that React won’t disappear tomorrow. React was created at Facebook to solve its problems. It brings tangible business value to the company and is used in many of its products.

페이스북 내의 문제를 해결하기 위해 만들어졌으며, Dogfooding이라는 표현을 통해 스스로가 만든 기술을 스스로가 사용하고 있음을 알 수 있다.

 

 

철학 Design Principles

선언적 Declarative

이름(React)부터 “반응”이라는 뜻을 가진 리액트는 인터랙티브 UI를 만드는 데 편리하다.

원하는 결과를 위해 한 단계씩 나아가는 것이 아닌, 원하는 결과를 선언(작성)하는 것만으로 원하는 대상의 값을 업데이트하고 렌더링까지 해준다. 이러한 선언적 특징은 코드를 이해하기 쉽고 디버깅을 용이하게 한다.

컴포넌트 기반 Component-Based

캡슐화된, 재사용 가능한 컴포넌트들로 복잡한 UI를 구성하도록 디자인되었다. 이러한 모듈화는 큰 프로젝트의 코드를 관리하기 좋고, 코드 유지보수나 확장성 측면에서도 유용하다.

또한, 컴포넌트 로직이 자바스크립트로 작성되어 컴포넌트 간 데이터를 전달하기 쉽다. 데이터, 즉 값 State DOM이 아닌 자바스크립트가 소유하고 관리하므로서 리액트는 관리할 DOM의 수가 줄게 되고, 렌더링이나 값 업데이트 시에 효율적이며 결과적으로는 더 나은 퍼포먼스를 내게 된다.

 

 

 

리액트의 디자인이 추구하는 것..은 공통적으로는 크게 위 두가지이다. 여기서 끝내기엔 아쉬우니 가볍게 리액트의 특이점에 대해서도 정리해본다.

특징

Learn Once, Write Anywhere

리액트는 보통 클라이언트 사이드 렌더링을 수행하는 싱글 페이지 애플리케이션인데, Node를 사용해서 서버사이드 렌더링도 가능하다. Next.js가 대표적인 프레임워크이며, 서버사이드 렌더링을 통한 SEO나 성능 측면에서의 이점을 누리기 위해 최근 Next.js의 인기가 올라가는 것 같다.

또한 React Native를 사용해서 안드로이드, iOS의 모바일 앱 개발도 가능하다. 다른 웹 프로젝트에서 사용하는 코드를 공통으로 사용할 수 있다는 점에서 편리해 보인다.

가상 돔 Virtual DOM, VDOM

리액트는 가상 돔이라는, 실제 돔을 모방한 객체를 만들어 상호작용함으로서 실제 DOM에 접근하는 횟수를 줄인다. Reconciliation이라고 부르는 이 과정은 값이 업데이트된 항목들을 바탕으로 새로운 가상 돔을 만든 후, 비교 알고리즘을 통해 실제 DOM과 차이나는 부분만을 교체하는 방식이다. 실제 DOM에 직접 접근하는 것이 비용이 많이 드는 행위이기에 이처럼 가상 돔을 통해 성능, UI 렌더링 측면의 이점을 누릴 수 있다.

그리고 이러한 방식을 통해 앞서 말한 “선언적 프로그래밍”이 가능해진다. 리액트에게 어떤 값을 원하는지 “선언”하면, 리액트는 DOM에 값을 반영한다.

 

 

 

 

 

 

 

사실 리액트 깃허브와 (레거시가 아닌 현재) 웹사이트를 봤을 때 “이것이 철학이다!!!” 라고 주장하는 글을 볼 수가 없어서 이걸 철학이라고 불러도 될지 그냥 특징이라고 해야할지 고민이 있었다. 그래서 디자인적인 철학과 특징이라 여겨지는 것들을 나름대로 분리해 보았다.

웹 개발을 처음 배울 때 바닐라 자바스크립트로 투두만들기를 진행했는데, 같이 스터디하던 분들께서 “리액트만 하다가 바닐라로 하니까 잘 모르겠고 어렵다;;”는 평을 주신 것이 기억났다. 당시에는 리액트를 사용해보지도 않아서 공감은 안되었지만 지금에서야 리액트의 철학을 이해하고 지금 내가 개발하는 방식을 생각해보면 나는 덕분에 참 편한 개발 과정을 거쳤다는 것을 느낀다.

 

[참고]

• 챗GPT
• https://legacy.reactjs.org/docs/design-principles.html