요즘 페이지들은 정적인 페이지가 아닙니다. 웹 앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적으로 바뀌었습니다. 이처럼 복잡하고 동적인 웹 페이지가 늘어나고 웹의 크기가 커지자, 자바스크립트 파일의 관리가 어려워졌고 이를 효율적으로 관리하기 위해 그리고 UI를 더욱 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 했습니다. 이를 위해 여러가지 라이브러리와 프레임워크가 등장하게 되었습니다.
✨React란?
간단히 말해서 React는 UI 개발을 위한 컴포넌트들을 모아둔 라이브러리라고 할 수 있습니다. UI를 레고라고 친다면 레고 조각 하나하나를 컴포넌트라고 할 수 있는 것이죠. 우리는 이 컴포넌트를 통해 재사용이 가능하고 서로 독립적인 조각 여러 개로 나누어 관리할 수 있습니다. React의 기술적 정의는 다음과 같습니다.
🎈react의 기술적 정의
페이스북이 개발한 사용자 인터페이스를 만드는 데 사용하는 자바스크립트 라이브러리입니다. React는 라이브러리지만 앵귤러와 같은 타입스크립트기반 프론트엔드 웹 애플리케이션 프레임워크와도 동일한 목적을 수행해 라이브러리보다 더 큰 개념인 프레임워크로도 여겨집니다.
✨React를 써야하는 이유?
물론 웹페이지를 만들 때 html, css, javascript를 사용해서도 만들 수 있습니다. 그렇다면 굳이 React를 써야하는 이유는 무엇일까요?
Virtual DOM의 존재
Virtual DOM이란 말그대로 가상의 DOM입니다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해줍니다. 이 Virtual DOM을 사용함으로써 데이터가 바뀌었을 때 더 이상 어떻게 업데이트 할 지를 고려하는게 아니라 일단 바뀐 데이터로 그려놓고 비교를 한 뒤 바뀐 부분만 찾아서 바꿔주는 방식으로 진행됩니다. 다음 동영상을 보시면 이해하기가 쉽습니다. (물론 React는 Virtual DOM을 성공적으로 사용한 선발주자이고 다른 라이브러리에서도 사용하고 있습니다.)
React and the Virtual DOM (https://www.youtube.com/watch?v=muc2ZF0QIO4)
React Native의 앱 개발 가능
웹과 앱은 엄청난 연관이 있습니다. 웹 프로젝트가 끝나 React 하나만 잘 활용하여도 React Native로 native moblie app을 만들 수 있기 때문입니다.
수 많은 커뮤니티
React 외에도 구글의 앵귤러나 뷰 등 웹 페이지를 만드는 프레임워크는 많이 있지만 그중에 React는 다른 프레임워크에 비해 사용자 수가 가장 많다는 것이 가장 큰 장점입니다. 왜냐하면 모르는 것이 생겨도 구글 검색을 통해 쉽고 빠르게 도움을 얻을 수 있기 때문입니다. 회사에서도 뷰는 알지만 리액트는 모르는 사람보다 뷰는 몰라도 리액트는 할 줄 아는 사람을 더 선호한다고...
Component를 사용한 재사용이 가능하고 유지보수의 용이함
미리 만들어 놓은 조각을 다시 사용할 수 있어 코드 재사용성이 높습니다.
✨마치며 (작성중)
- 개발자 구직 사이트를 둘러보면 요즘 프론트엔드 개발자에게 React는 거의 필수적으로 요구되는 기술로 보임
- 사실 아직 배우는 단계라 어렵게 느껴짐
- 최신 트렌드에 따른 끝없는 공부가 필요할 것(개발에 있어서는 당연한 말이지만!)
참고자료
