프론트엔드 개발을 할 때 vanilla.js를 사용하여 개발하면 되는데 왜 굳이 react라는 프레임워크를 설치하여 사용할까?
웹 생태계가 발전함에 따라 웹 서비스의 규모가 커질수록 효율적으로 코드를 관리하는 방법이 필요했다.
이러한 이유로 여러 프레임워크가 탄생했고 프론트엔트 생태계에서 가장 많이 사용하고 있는 프레임워크가 리액트이다.
리액트를 사용하면 얻는 많은 장점들이 있겠지만 개인적으로 react를 사용하는 가장 큰 이유는 컴포넌트 활용이라고 생각한다. 컴포넌트는 개발자들의 코드 관리에 큰 도움을 준다.
컴포넌트
리액트의 컴포넌트는 리액트 애플리케이션을 구성하는 기본적인 단위이다. 컴포넌트는 UI의 특정 부분을 독립적으로 관리할 수 있도록 해주며, 각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가질 수 있다. 리액트에서는 이 컴포넌트를 재사용하고 조합하여 복잡한 UI를 효율적으로 구축할 수 있다. 컴포넌트를 사용하게 됨으로써 얻게 되는 장점은 무엇일까?
UI의 재사용성
컴포넌트를 사용한다면 반복해서 사용하는 UI를 컴포넌트화하여 코드량을 줄일 수 있고 효율적으로 관리할 수 있다.
디자인을 확인해보니 여러 페이지가 있는데 그 중 반복되는 UI가 있다고 가정해보자.
HTML
HTML로 페이지들을 구성한다면 Text Input,CheckBox,Radio,Table,Header 등등 이러한 UI들이 여러 페이지에서 똑같은 디자인으로 같은 기능을 했을 때, 페이지마다 해당 UI에 대한 HTML을 구성해야한다. 이는 같은 UI에 대한 코드를 반복해야하므로 코드가 길어지게 되고 코드의 변경사항이 있을 때 이를 반영하기 위해서 모든 코드를 수정해야한다.
즉, 유지보수하는데 번거로움이 있을 수 있다.
React
리액트에서는 위처럼 반복되는 UI를 컴포넌트화 시켜서 불러올 수 있다.
특정 UI를 반복하여 사용할 상황이 있을 경우 하나의 컴포넌트만 설계하여 재사용하면 된다. 뿐만 아니라 페이지마다 해당 UI의 요구사항이 다르다면 해당 컴포넌트를 기준으로 그에 맞게 컴포넌트를 적절히 커스터마이징도 할 수 있다.
변경사항이 있을 때에도 해당 컴포넌트만 수정해주면 되기 때문에 효율적으로 유지보수 관리를 할 수 있다.
위처럼 리액트는 반복되는 UI를 컴포넌트화함으로써 재사용성과 코드 관리 용이성을 높인다는 장점이 있다.
코드 복잡도 단순화
많은 UI와 기능으로 구성된 특정 페이지가 있다고 가정하자.
HTML
HTML로 구성하였을 때에는 페이지를 구성하는 요소들을 하나의 HTML 파일에 모두 담아야하기 때문에 해당 파일의 코드가 매우 길어질 수 있다. 나중에 해당 페이지에 대하여 추가 개발을 하거나 다른 개발자가 유지보수를 할 때에 코드파악을 하는데 어려움이 있을 수 있다.
React
위에서 말했듯이 React는 컴포넌트라는 큰 무기가 있다. 개발자가 자신이 정해놓은 기준으로 UI를 컴포넌트화하여 페이지를 컴포넌트 단위로 분리하여 관리할 수 있다. 컴포넌트로 쪼개어 관리한다면 페이지 코드를 확연히 줄일 수 있고 가독성 또한 많이 증가한다. 이는 추가개발이나 유지보수할 때에 코드파악이 빠르게 될 수 있고 이는 수정해야할 부분과 추가 개발을 해야할 부분을 빠르게 파악할 수 있다.
이처럼 React의 컴포넌트를 사용함으로써 코드복잡도를 단순화할 수 있다.
서비스를 컴포넌트 단위로 체계적 설계
컴포넌트를 사용하면 UI를 명시적으로 표현할 수 있고 서비스에 대한 전체적인 UI를 체계적으로 설계할 수 있다.
아래와 같이 하나의 페이지가 있다고 가정해보자.
MainPage.jsx
const MainPage = () => {
return <>
<Header/>
<Content/>
<Footer/>
</>
} MainPage는 3개의 컴포넌트로 구분되어있다.
<Header/>컴포넌트는 페이지의 최상단 UI에 관련한 컴포넌트이고
<Content/>컴포넌트는 페이지의 내용 역할을 하는 UI 컴포넌트이며
<Footer/>컴포넌트는 페이지의 맨 아래의 내용을 관리하는 UI 컴포넌트이다.
위처럼 페이지에 대한 각 역할에 따른 컴포넌트를 구분해주어 UI의 역할을 명시적으로 표현해줄 수 있다.
또한 서비스를 컴포넌트 중심으로 최상위 컴포넌트부터 하위 컴포넌트까지 만들어 이를 조립해 체계적으로 UI를 설계할 수 있다.
초기 로딩 속도에 대한 이슈
페이지수가 많아지면 그만큼 불러와야할 javascript의 양이 많아진다. 리액트는 처음 웹 서비스에 접근하였을 때 모든 script를 불러오게 되는데 불러와야할 양이 많아진다면 초기 로딩 속도가 느려진다.
초기 로딩 속도에 대한 이슈 해결법
그럼 리액트를 사용할 때 초기 로딩 속도 개선하기 위해서는 어떤 해결방법이 있을까?
코드 스플리팅(Code Spliting)이란 방법이 있다. 코드를 분리한다는 것인데 기준이 라우트 기준으로 각 라우트에 대한 스크립트를 분리하는 것이다. 즉, 초기에 모든 스크립트를 불러오는 것이 아니라 각 라우트에 진입하였을 때 라우트에 해당하는 스크립트가 불러와지는 것이다.
이를 통해, 처음 웹페이지에 진입했을 때 , 해당 페이지에 대한 스크립트를 불러와 렌더링하기만 하면 되므로 초기 로딩 속도를 개선할 수 있다.
