리액트(React) ?

NSH·2020년 10월 8일
0
post-thumbnail

🌈 작성 이유

리액트를 사용하고 있지만, 리액트가 뭐야? 라고 누군가 물었을 때 섣불리 대답하지 못했다.
부끄러운 일이 반복되지 않도록 지금이라도 리액트에 대해서 다시 공부하면서 정리해보려고 한다.

🌈 리액트(React) 란 ?

페이스북에서 제공하는 자바스크립트UI(View) 라이브러리다.
컴포넌트 기반으로 데이터를 내려주면 설계한데로 UI가 만들어져 사용자에게 보여진다.

🌈 리액트 특징

1. Virtual DOM

Virtual DOM은 DOM의 상태를 메모리에 저장하고 변경 전, 후의 상태를 비교하여 변경된 부분만 반영한다.

  1. 업데이트 한 전체 UI를 Virtual DOM에 리렌더링
  2. 실제 DOM과 생성된 Virtual DOM을 비교
  3. 바뀐 부분만 실제 DOM에 적용

Virtual DOM은 무조건 좋을까?

Virtual DOM을 사용한다고 사용하지 않을 때와 비교하여 무조건 빠른 것이 아니다.

리액트 메뉴얼에는 다음과 같은 문장이 있다.

지속적으로 데이터가 변화하는 대규모 에플리케이션 구축하기

작업이 매우 간단할 때(정적 페이지)는 오히려 리액트를 사용하지 않는것이 성능이 더 잘 나올때도 있다.

리액트와 VirtualDOM이 항상 제공할 수 있는 것은 업데이트 처리 간결성이다.

2. 컴포넌트 단위 작성

  • 컴포넌트는 UI를 구성하는 개별적인 뷰 단위
  • UI 개발이 레고라고 하면 컴포넌트는 블록 역할
  • 블록들을 조립해서 하나의 완성품을 만든다.
<Person>
	<Head></Head>
    <Body></Body>
    <Foot></Foot>
</Person>

🌈 마무리

리액트에 대한 장점들이 많이 존재하겠지만 가장 중요하다고 생각되는 장점 2가지를 간단하게 정리했다. 지속적으로 데이터가 변화하는 애플리케이션을 구축할 때 업데이트 처리가 간결한 리액트를 도입하면 많은 장점을 누릴 수 있을 것 같다.

profile
잘 하고 싶다.

0개의 댓글