[React] React 개발은 할 줄 아는데 뭔지는 제대로 몰라서

회사에서 Web 서비스나 관리자페이지 개발을 할 때 React를 사용하여 개발을 한다. 

여러 프레임워크 중 Vue나 Angular, Svelte가 아니라 왜 React를 써야하는지 알고싶어졌다.

 

React 공식 홈페이지에 가서 어떤 친구인지를 찬찬히 읽어보았다.

 

React

자바스크립트 라이브러리로 UI(User Interface)를 만들기 위해 사용된다.

React로 프로젝트를 개발할 때에는 JSX를 사용한다.

React 컴포넌트는 render() 메서드를 통해 입력 데이터를 받고 화면에 표시할 것을 반환한다.

 

JSX(JavaScript XML)

Javascript에 XML을 추가한 문법이다.

자바스크립트에서 HTML을 작성하듯이 사용하기 때문에

한 파일 내에서 자바스크립트와 HTML을 동시에 작성할 수 있다는 것이 장점이다.

 

상태 기반 컴포넌트

컴포넌트는 내부 상태 데이터를 관리할 수 있다.

컴포넌트의 상태 데이터가 바뀌면 render() 메소드가 다시 호출되어 렌더링된 마크업이 업데이트된다.

 

Props와 State

• pros(properties)
  • 컴포넌트 간 데이터를 넘겨주기 위해 사용
  • 값 변경 불가

• state
  • 컴포넌트의 상태를 나타내며 컴포넌트 내부에서 선언되기에 컴포넌트 스스로 관리
  • 유동적으로 변하는 값 저장

 

VirtualDOM

• DOM(Document Object Model)(문서 객체 모델)
  • html과 js를 이어주는 역할
  • 웹 브라우저 단에서 DOM 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리렌더링 해야해서 시간이 허비된다. 이 과정에서 버그가 발생하거나 브라우저가 죽는 일 등을 개선하고자 가상돔(Virtual DOM)이 나왔다.
• 가상 돔(VirtualDOM)
  • 실제 DOM에 접근하여 조작하는 대신 추상화한 자바스크립트 객체를 구성하여 사용
  • DOM의 상태를 메모리에 저장하고, 변경 전/후 상태를 비교한 뒤 최소한의 내용만 반영
  • 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링함
  • 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔끼리 비교)
  • 바뀐 부분만 실제 DOM에 적용됨

 

Hooks

• Hook은?
  • 함수형 컴포넌트가 클래스형 컴포넌트 기능을 사용할 수 있도록 해주는 기능
  • 클래스형 컴포넌트에서만 사용할 수 있던 state와 life cycle을 함수형 컴포넌트에서도 사용
• 탄생 배경
  • 기존 클래스형 컴포넌트는 컴포넌트간 로직 재사용 불가했고 코드가 복잡해졌다.
  • 기존 함수형 컴포넌트는 한번 호출되고 메모리상에서 사라져 상태값 접근과 라이프사이클 구현이 불가능했다.
• 예시
  • useEffect
  • useState
  • useContext

 

출처 : https://reactjs-kr.firebaseapp.com

React – A JavaScript library for building user interfaces

https://ko.wikipedia.org/wiki/리액트_%28웹_프레임워크%29

리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전