[React] React JS 란?

공식 페이지: https://react.dev/

React

 

[React]

- UI를 만들기 위한 자바스크립트 라이브러리

- 컴포넌트들로 구성된 그룹

- 컴포넌트를 만들 시에 각 컴포넌트는 독립적이며, 재사용성이 높게 설계해야함

- 값의 상태가 변경될 때 화면이 re-rendering 됨

   -> state: 컴포넌트 내부에서 수정 및 사용되는 값

   -> props: 컴포넌트 외부에서 주입되어 사용되는 값

- re-rendering 시에는 실제로 변경이 필요한 부분만 업데이트 됨

- Virtual DOM Tree를 사용하기 때문에 전체 트리가 아닌 실제로 변경이 필요한 노드만 업데이트 됨

 

- Virtual DOM(Document Object Model)

- DOM의 상태를 메모리에 올려둠

- 이전 상태와 변경이 필요한 현재 상태를 비교한 뒤에 변경이 실질적으로 일어난 부분만 실제 DOM에 업데이트

 

- CSR(Client Side Rendering)

HTML, JavaScript 등을 초반에 전부 다 다운로드 받아서 조립 후 하나의 웹페이지를 만든 후에 사용자에게 제공하는 SSR(Server Side Rendering)과는 다르게 초기 로딩 시에 페이지 운영에 필요한 모든 리소스를 다운 받아 화면 이동이 필요할 시에 JavaScript를 이용해 동적으로 페이지를 업데이트한다.

새로운 페이지로 이동 등의 이벤트가 발생할 때마다 HTML/JavaScript 재 로딩 작업이 필요한 SSR 방식과 다르게 처음에만 데이터를 로딩하는데 시간이 걸리고 그 후에 추가적으로 로드되는 시간이 들지 않기 때문에 동적인 페이지에 적합하다. 대신 동적으로 만들어지기 때문에 SEO(Searh Engine Optimization)에는 좋지 않다.

 

- SPA(Single Page Application)

초반에 진입할 때 필요한 index.html만 존재하며, 페이지 내 변경이 필요한 데이터는 자바스크립트를 통해서 동적으로 리렌더링 시킨다.

 

 

[React Hooks]

- 리액트에는 컴포넌트를 만드는 2가지 방법이 있다: 클래스 형과 함수 형

- class 형이 시초였으나, 현재는 functional component를 사용하는 React Hooks 까지 나온 상태.

- 재사용 가능한 함수(로직 o, 값 x)들로 이루어져 있다.

 

[state로 보는 클래스 형과 함수 형의 차이]

	class component	functional component
선언	constructor(props) {       super(props);      this.state = { count: 0 }; }	const [count, setCount] = useState(0);
사용	this.setState({ count: this.state.count + 1 })	setCount(count + 1)