React??
앞으로 쓰게될 React.js에 대해 아주 늦게 첫 발을 디뎠다
새로운 스택을 익히려 하는데 아무리 글을봐도 이해가 안되는 나의 머리를 탓하며 아주 쉽게 정리해보려 함
혹시라도 이 글을 보시게 된다면, 틀린부분이 있을 수 있으니 한번쯤 의심하면서 보시고
틀린부분은 바로바로 지적해주시면 감사하겠습니다
정리하는 글이기에 반말로 적겠습니다.
리액트란?
페이스북에서 만든 사용자 인터페이스 라이브러리
절대적으로 View단을 구성하기 위한 라이브러리이다.
리액트를 만든 이유?
기존 MVC패턴은 확장이 어렵고 거대한 시스템에 어울리지 않는다는 생각을 하게된 페이스북은 새로운 대안으로 Flux라는 데이터 흐름이 단방향인 시스템 아키텍쳐를 만들었다.
이 Flux는 “새로운 패턴이 아니라 MVC의 새로운 이름일 뿐이다” 라는 논란도 일었지만,
둘의 가장 큰 차이는 데이터 흐름이 단방향이라 더욱 직관적이고, 관리하기가 쉽다는 점이다.
리액트의 특징
1.JSX
템플릿을 사용하지 않고 고유의 XML확장 문법인 JSX를 사용한다.
쉽게 이해해 자바스크립트에서 HTML코드를 쓸 수 있게하는 문법이다.
이렇게 작성한 코드는 Babel을 통해 별도의 컴파일 없이 사용 가능하다.
2.Virtual DOM
기존에 DOM을 직접 핸들링하는 제이쿼리는 페이지를 새로고침하면 페이지의 모든 요소를 새로 렌더링하는 반면에,
리액트는 Virtual DOM(가상돔)을 사용해 변화가 있는 부분을 비교해 최소한의 요소만 다시 렌더링하게되어,
보다 빠른 속도로 화면을 보여줄 수 있다.
3.One Way Data Flow
데이터는 위에서 아래로만 흐르기 때문에 구조가 커졌을 때 양방향 바인딩에 비해 데이터의 흐름을 파악하기가 쉽다.
4.Server Side Rendering
클라이언트에서만 렌더링을 하면 HTML, JavaScript, Data, View 순으로 진행하는 시간 소요로 초기구동 속도가 느리고,
자바스크립트를 실행못하는 검색 엔진 봇들은 처음 렌더링 된 빈 HTML만 수집하기 때문에 콘텐츠가 없다고 판단되어 SEO에 취약하므로, 서버 렌더링을 지원한다.