[WIL] React

React 왜 사용하나요 ?

 

 

프론트 엔드 라이브러리, 프레임 워크 ❓

프로젝트가 커지면서 DOM 요소들 또한 변화가 이루어집니다. DOM 요소들이 변화한다는 것은 렌더 트리 재생성, 요소의 스타일 계산, 레이아웃 구성, 패인팅 하는 과정을 거쳐야 한다는 것과 같다. 

즉, 유저 인터랙션이 전달되는 만큼 이와 같은 과정이 계속 반복되어야 한다 이러한 과정이 반복되면 브라우저가 많은 연산을 해야하고 불필요한 리소스를 낭비하게 된다. 이러한 이유로 라이브러리, 프레임워크는 DOM 관리와 상태 변화 관리를 최소화 하여 불필요한 리소스 낭비를 더이상 하지 않게 도와준다. 

 

React❓

페이스북에서 개발하고 관리하는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

리액트는 가상 돔으로 UI를 빠르게 업데이트 해주고, 메모리에 가상돔을 올려놓고 이전과 이후를 비교하여 변경될 UI의 최소 집합을 계산해준다. 

 

React 특징❓

• 컴포넌트 기반의 화면 구성 
  • 화면의 한 부분을 컴포넌트 라는 단위로 나누어 관리할 수 있다. 애플리케이션에서 컴포넌트의 역활과 기능에 따라 관리하기 용이하며, 재사용성을 높여준다.
  • 컴포넌트의 화면을 구성한다면 블록쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있다. 
• 가상 돔으로 인한 빠른 속도 
  • 매번 DOM 전체를 직접 접근하여 변화를 주면 html, css, js 파일 전체를 다시 리렌더링하기 때문에 느려질수 밖에 없다. 그래서 React는 가상 돔을 이용하여 DOM을 조작하는 횟수를 줄여서 성능을 빠르게 개선하였다. 
    • 출처 :  가상 돔이란?

[WIL] DOM이란? (feat. Virtual DOM)

 

• 자바스크립트 기반
  • 리액트는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며 자바스크립트를 그대로 활용하면 된다. 
• 단방향 데이터플로우 
  • 데이터가 UI로 흐르는 구조이며, 데이터가 변했을때 UI가 업데이트 된다. 하지만 단방향으로 UI쪽에서 데이터를 변화시키는 것은 불가능 하다. 즉 데이터가 변하게 되면 UI는 변화된 새로운 데이터와 함께 업데이트 된다. 앵귤러와 비교하면 앵귤러의 경우 양방향 데이터 플로우이며, 반대로 데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해하기 쉽고 편리하게 구현 가능하다.

---

정리 하자면, 

시장에서 요구되는 웹 서비스의 규모가 커짐에 따라 복잡한 애플리케이션을 개발하며 생산성을 향상+많은 양의 데이터 관리+코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중  쓰이는 세 가지 중 (Angular, Vue, React) React는 가상 돔, 컴포넌트 단위 개발, JSX 지원, 서버 사이드 렌더링, 클라이언트 사이드 렌더링 지원, 프레임워크와도 혼용 가능 이라는 특징 때문에 많이 쓰인다.

 

 

 

🎯출처

React ?

https://velog.io/@dea8307/React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

React를 사용하는 이유 ?

 

리액트 장점, 단점 

https://helloworld-88.tistory.com/m/350

[React] 내가 React를 선택한 이유

 

사용 하는 이유 

https://gurtn.tistory.com/m/96

[React] 리액트를 사용하는 이유

서버 사이드 렌더링, 클라이언트 사이드 렌더링

https://itprogramming119.tistory.com/m/entry/React-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81CSR%EA%B3%BC-%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81SSR

[React] 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)