React를 1년동안 사용하면서 느낀점

React는 Facebook에서 개발한 웹 프론트엔드 라이브러리 입니다. MVC중의 V - View 만을 담당하는 라이브러리 입니다. 기존의 DOM은 자주 변하는 동적인 UI에 최적화 되어있지 못해서 웹 기술이 발전하고 웹페이지의 규모가 커질 수록 성능상의 이슈가 빈번히 발생했습니다. 그래서 페이스북에서는 이 DOM의 조작을 최소화 시켜서 UI업데이트를 최적화 해 주는 React라는 라이브러리를 개발하였습니다.

React는 Virtual DOM이라는 기존의 DOM을 추상화해서 업데이트 되는 UI를 반영하고, 업데이트가 완료되면 이 Virtual DOM을 이전의 Virtual DOM과 비교해서 달라진 부분만 실제 DOM에 반영하는 방식으로 레이아웃 계산을 최소화 시킴으로써 성능을 향상시켜줍니다. 따라서 성능의 이슈가 없는 규모가 작거나 동적이지 않은 웹페이지에 React를 사용한다고 엄청난 효과를 얻을 수 있는건 아닙니다. 

React는 페이스북, 인스타그램, 야후, 넷플릭스등 유명한 서비스들을 포함하여 많은 곳에서 사용되고 있습니다. 저 또한 진행하고 있던 토이프로젝트에 React를 추천받아 1년째 사용하고 있습니다. 그래서 이번 포스팅에서는 React를 1년동안 사용해 보면서 배우고 느꼈던 점들에 대해서 이야기 하고자 합니다.

아래 내용은 대부분 평범한 개발자의 주관적인 생각이므로 참고용으로만 읽어주시길 바랍니다.

■ React의 장, 단점

아쉽게도 React를 이용해보면서 실질적으로 성능 향상을 겪어봤다거나 어떠한 문제를 해결했다! 라는 경험은 없었습니다. 하지만 단순히 React라는 라이브러리를 사용했을 때 프론트엔드 개발중에 느끼는 장, 단점을 이야기 해보고자 합니다.

우선, 제가 Java를 좋아해서 그런지 몰라도 React의 컴포넌트 구조를 계층적으로 구성하고 용도에 맞추어 컴포넌트와 모듈들을 구별하여 프로젝트를 진행했습니다. 이런식으로 컴포넌트를 구성하면 프로젝트 전체의 가독성이 높아지고  컴포넌트를 쉽게 재사용 할 수 있었습니다. React의 강점은 컴포넌트 재사용

 React는 컴포넌트를 분리해서 마치 Java 코드를 짜듯이 코드를 구성할 수 있습니다. 또한 기존의 다른 프레임워크들과는 다르게 템플릿 형태가 아닌 JSX라는 문법으로 컴포넌트의 구조를 정의합니다. 원래 순수 JS 코드로만 작성되어야 하는 코드를 마크업 형테로 작성할 수 있도록 JSX라는 새로운 언어를 만들었습니다.

한 코드는 JSX를 통해 구현한 컴포넌트이며, 두 번째 코드는 JSX를 사용하지 않은 동일한 컴포넌트 입니다. 만약 JSX가 없었다면 두 번째 코드와 같이 작성을 해야만 합니다. 

하지만 이러한 점이 기존 형태의 HTML 구조를 찾아보기 어렵기 때문에 마크업 개발자와의 협업에 지장이 되는 경우가 있습니다. 하지만 타 프레임워크들 역시 html 템플릿 코드에 비즈니스 로직 개발자가 특수한 로직 코드를 삽입해야 하기 때문에 어느 프레임워크든 마크업 개발자와의 원활한 협업은 불가능하다고 생각합니다. 또한 마크업 개발자가 없다면, 여러 소스파일을 이동할 필요 없이 하나의 파일에서 JSX 구조와 로직을 수정할 수 있어서 코드가 더 직관적이라고 느꼈습니다.

■ CSS 캡슐화

CSS 캡슐화란 컴포넌트 단위로 CSS가 중복되지 않도록 선택자들의 이름을 랜덤화 하는 것 입니다. 이렇게 하면 각 컴포넌트 단위로 CSS가 분리되어서 사용할 수 있기 때문에 같은 클래스 이름을 여러 컴포넌트에서 사용하더라도 충돌이 일어나지 않는다는 것이죠.

CSS 캡슐화는 굉장히 강력한 기능이라고 생각합니다. 처음 React를 쓰기 시작할때부터 저는 이 기능을 사용해서인지 캡슐화를 사용하지 않으면 매우 불편하기까지 합니다. 한 가지 아쉬운 점은 Angular의 경우에는 프레임워크에서 자체적으로 CSS 캡슐화를 제공하지만, React는 webpack으로 별도의 설정을 해야만 가능하다는점이죠. 하지만 

■ React에 Redux는 필수이다?

Redux는 React에서 컴포넌트 간의 State 전달 및 관리를 편리하게 해 주는 라이브러리라고 생각하시면 됩니다. Redux는 Flux라는 아키텍쳐를 조금 손봐서 React에 사용하기 적합하게 만들었습니다.

기존에 React를 처음 배우기 시작할 때 Redux를 같이 배웠기 때문에 그런줄로만 알고 있었습니다. 하지만 React로 여러 프로젝트를 하다보며 Redux를 사용하지 않아도 되는 부분이 많았으며 오히려 Redux까지 필요하지 않는 기능에도 state를 맡기다보니 더러워지거나 오버 엔지니어링을 했던 시행착오가 있었습니다.

규모나 상황에 따라 Redux는 선택적으로 사용하는 것이 맞는 것 같습니다. 물론 Redux를 사용한다고 하더라도 어느 컴포넌트에, 어떤 state를 공유할건지 고민을 많이 해보고 하는것이 좋다고 생각합니다.

어떤 곳에서는 오히려 React의 깔끔한 구조를 깨트린다는 소견도 있습니다. 제 생각도 Redux가 굳이 필요하지는 않다고 생각하지만 전체적인 프로젝트의 복잡성을 낮추는데 도움은 된다고 생각합니다.

■ React VS Angular

앵귤러와 React의 가장 큰 차이점은 템플릿 형태라고 생각합니다.

이 외에 어느 블로그에서 Angular와 Angular2는 이름만 같은 전혀 다른 프레임워크다 라는 이야기를 들었습니다.

물론 이 하위호환때문에 상위 버전에서 지워진 메소드를 사용했다가 오류 원인을 찾지 못해서 해메는 경우도 있긴 했습니다.

처음에 설명했듯이 React는 View만을 담당하는 라이브러리이며 Angular는 웹 프론트엔드 개발의 전반적인 도구들을 제공하는 프레임워크 입니다, 물론 둘을 비교하고자 할때는 React Family와 Angular를 비교하곤 합니다. 하지만 각 라이브러리, 프레임워크에 따라 특징, 장단점이 있어서 취향, 필요에 따라 사용하시는게 맞는것 같습니다.

■ TypeScript의 장단점

최근(?) TypeScript가 인기를 끌고 있어서 저도 React와 TypeScript를 께 사용해 보았습니다. TypeScript를 사용하면서 가장 크게 느낀점은 "내가 짠 코드가 신뢰된다."라는 것 이였습니다.명시적인 타입의 명확성과 가독성, 컴파일타임의 강력한 에러 검출등 타입스크립트의 장점은 많았습니다.

하지만 기존 js의 특장점이라고 할 수 있는 유연함을 제한하고, 명시적인 type을 정의하는대에 소모되는 비용이 든다는 점이였습니다. 또한 모듈 설치시 typescript 정의 파일도 별도로 install을 해주는것이 은근 귀찮을때도 많았습니다.

■ 마치며

이제는 React를 사용하지 않고 순수 Html, Css, JavaScript로만 홈페이지를 거의 작성하지 않게된것 같습니다. 그만큼 React의 매력과 장점이 저에게는 많이 와 닿았고 앞으로도 깊게 공부해볼 계획입니다. 다음에는 Vue 에대해서도 공부해보고 비교하는 포스팅을 해보도록 하겠습니다.