why react?
면접을 계속 보다보니 살짝 근본적인 질문을 받게 되는 경우가 많았다.
‘리액트를 왜 사용하시나요?’ 혹은 ‘리액트의 장,단점이 무엇인가요?’와 같은 부류의 질문인데,
처음 이 질문을 받았을 때는 굉장히 당황했다. 사실 프론트엔드 개발자라는 타이틀을 달고 있으면서도 내가 리액트를 왜 사용하는지?에 대한 질문은 부족했었고, 나도 그냥 배웠으니까 혹은 커뮤니티에 자료들이 많으니까 정도로 생각하고 넘겼었다.
하지만 계속해서 그냥 넘기기만 한다면 정말 이게 내가 사용하는 기술이 맞을까라는 질문이 생기고, 그 질문에 내가 제대로 답을 하지 못한다면 의미가 없다는 생각이 들었다.
근본으로 돌아가자, 왜 사용해야되냐?
모든 웹 페이지를 만들기 위해서 굳이 프론트엔드 라이브러리나 프레임워크를 사용할 필요는 없다. html,css vanilla js 만으로도 충분히 웹 페이지를 만들 수 있다. 특히 정직인 페이지를 만드는 것이 목적이라면 굳이 라이브러리나 프레임워크의 도움은 필요하지 않을것이다.
문제는 여기에서 발생한다. 요즘의 웹 페이지들은 ‘정적’인 웹페이지가 아니라 유저와 상호작용이 중요한 ‘동적’인 웹페이지이고 한층 더 복잡해졌다. 이렇게 복잡하고 동적인 웹페이지가 늘어나고 웹의 크기가 커지자 자바스크립트 파일의 관리는 갈수록 어려워졌고, 이를 효율적으로 관리하기 위한 여러 라이브러리가 등장하게 됐다. 이런 라이브러리, 자바스크립트 파일들이 갈수록 복잡해지고 어려워지면서 수없이 많은 html, css js 코드들이 많아졌고 이에 따라 페이지간 이동을 할 때마다 속도는 갈 수록 느려졌다.
이 때, SPA라는 방식이 등장하게 된다. SPA는 HTML, CSS, JS 파일을 최초 1회만 로드하고, 이후에는 js 파일을 통해 dom 또는 HTML 파일을 조작하는 방식을 말한다. 이 방식은 서버로부터 완전한 새로운 페이지를 불러오지 않고, 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.
framwork? library?
기본적으로 리액트는 아래와 같이 정리되어 있다.
리액트는 페이스북에서 개발한 UI 라이브러리로써 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해준다.
리액트는 시작부터 view 라이브러리였고, 어떤 시스템적인 구성을 강제하지 않았다는 점에서 다른 프레임워크들과 차별점을 가진다.
보는 사람의 관점에 따라 리액트가 프레임워크인지, 라이브러리인지에 대한 의견이 갈리지만, 리액트 공식 문서에서도 그렇고 리액트는 라이브러리로써 기능한다고 되어 있다.
그 중에서도 리액트인 이유?
웹 서비스가 커지면 커질수록 상태를 관리해야 할 필요성은 커져간다. 상태가 하나 바뀔 때마다 DOM요소 하나하나를 직접 관리하고 코드를 리팩토링 하는 것은 그만큼 브라우저의 프로세스가 비효율적이 되는 것이다.
가상 dom을 사용하게 된다면, 최종 완성된 결과만을 실제 DOM으로 전달하게 된다. 즉, 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다.
리액트의 장점
- JS 기반
- js 기반이기 때문에 별도의 프레임워크를 배울 필요가 없다.
- 선언형
- 사용자 인터페이스를 만들 때 쉽고 간결하게 해준다. 애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 렌더링해 화면 구성을 해 준다.
- 가상돔
- dom을 직접 조작하는 것이 아니라 가상 dom을 조작하기 때문에 효율적이다.
- 컴포넌트
- 컴포넌트 별로 나누어 개발이 가능하기 때문에 재사용성이 높고, 애플리케이션을 통한 대량 데이터를 전송가능하게 하고 dom의 외부상태르 쉽게 유지할 수도 있다.
- 단방향 데이터플로우
- 데이터에서 UI로 흐르는 구조이며, 데이터가 변했을 때 ui가 업데이트 된다.
- 데이터 흐름이 단방향으로 흐르기 때문에 디버깅이 용이하고, 안전성이 높다.
- 생태계가 넓다
- 타 프레임워크보다 커뮤니티나 자료가 많다.
- 다른 프레임워크나 라이브러리와 혼용가능하다.
- 리액트는 다른 프레임워크나 라이브러리와 쉽게 같이 사용할 수 있고, 이미 개발된 서비스에서도 일정부분만 적용이 가능하다.
리액트의 단점
- mvc 패턴에서의 view만을 관리하기 때문에 다른 부분은 써드파티 라이브러리를 이용해서 직접 구현해야 한다.
- inline-template,jsx를 사용해야 하기 때문에 처음에 적응이 어려울 수 있다.
- IE8이하 버전은 지원을 하지 않는다.
리액트는 그럼 언제?
- 빠른 일정 안에 가벼우면서 현대적인 서비스를 개발해야 할 때
- 웹사이트 개발 솔루션을 안전하게 보호할 수 있는 유연한 프레임워크가 필요할 때
- 크로스 플랫폼 애플리케이션이나 싱글 페이지 어플리케이션을 개발할 때
- 기존의 앱에서 기능성을 확장할 때
- 강력한 커뮤니티 지원과 솔루션이 필요할 때
Comments