현업에서 가장 많이 쓰인다는 라이브러리중 React에 대해 정리해보겠다.
React를 왜 사용하는지 어떤 구조로 작동하는지에 대해서!!!
요즘 웹은 정적이고 단순한 페이지가 아닌 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이다.
페이지의 규모가 커지고 다양한 UI, UX를 동적으로 구현하려면 복잡하고 많은 상태를 관리한다는건 많은 부담이 생긴다.
많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 나타난게
Frontend Framework(Library)
그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.
그중 Angular, Vue 프레임워크이고 React는 라이브러리이다.
라이브러리와 프레임워크차이는?
.png)
라이브러리와 프레임워크의 공통점은 남이 만들어 놓은 도구를 사용한다는점.
흐름을 누가 지니고 있냐의 차이
프레임워크는 전체적인 흐름을 자체적으로 가지고 있어
개발자가 그 도구 안에서 필요한 코드를 작성한다.
라이브러리는 개발자가 전체적인 흐름을 가지고 있어 라이브러리를 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용한다.
React를 사용하는 이유는?
리액트는 UI 개발을 위한 만들어졌다.
리액트를 사용하면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들수 있다.
복잡하고 다양한 웹어플리케이션을 구현하려 할때
생산성을 향상 시키기고 많은 양의 데이터 관리와
코드 유지 보수에 편리하기 때문이다.
React란?
리액트는 페이스북에 의해 만들어졌다.
페이스북에서 개발하고 관리하는 사용자 인테페이스를 만들기 위한 자바스크립트 라이브러리이다.
그렇기 때문에 페이스북의 리액트를 관리하는 개발자가 고맙게도 자동으로 업데이트를 해준다.
React의 작동원리
DOM은 자바스크립트에서 HTML에 접근할 수 있도록 요소들을 객체화해서 사용할 수 있도록 해준다.
가상 돔(virtual DOM)
리액트는 가상 돔을 사용하여 실제 DOM에 접근하는 대신에 요소들을 추상화시켜객체를 구성하여 사용한다. (실제 돔의 복사본같은 개념)
리액트가 가상돔을 반영하는 절차
(특정 페이지에서 데이터가 변했을 때, 리액트를 이용해 돔을 업데이트시키는 절차)
- 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
- 이전 가상돔에 있던 내용과 변화된 가상돔을 비교한다.
- 바뀐 부분만 실제 돔에 적용.
- 바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.
즉, 리액트는 반드시 필요한 부분만 갱신해서 내부 상태와 실제 상태를 같게 만든다. 데이터가 바뀔 때 마다 페이지 전체를 렌더링 하는 것보다 훨씬 효율적인 방법이다.
이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다. Virtual DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달한다.
React의 특징
Component
리액트는 UI를 여러 컴포넌트로 만들기 때문에 재사용성이 높다.
컴포넌트만 import해 사용하면 된다는 간편함이 있고
애플리케이션이 복잡해지더라도 코드 유지보수, 관리에 용이하다는 장점이 있다.
컴포넌트는 함수형, 클래스형 두가지 방법으로 선언할 수 있다.
//클래스형
import React from 'react'
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component- 클래스형 컴포넌트에서는 위와같이
render함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.
//함수형
import React from 'react'
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div>
)
};
export default ComponentJSX(Javascript Syntax Extension)
JSX란? 리액트에서 사용하는 자바스크립트 확장 문법이다.
- 자바스크립트를 표현하려면 {} 안에 넣어야함
- class vs. className
속성은 CamelCase로 표현 - class가 아니라 className으로 표시함
- Self Closing Tag
(ex)<div></div> -> <div /> - 모든 요소를 감싸는 최상위 요소가 있어야 함
<div>
<button className="btton"}
onClick={this.goToMain}>로그인
</button>
</div>JSX의 큰 특징 중 하나는 Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.
React Fragment (<> ... </>)를 사용한다.
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login</div>
<br />
<div style={{backgroundColor: "grey", height: "10px"}} />
</>