React

리액트를 공부하면서.. 리액트에 대한 개념이 부족하다 생각하여 글을 작성합니다.. (공부의 목적..)

React

자바스크립트 라이브러리로, 컴포넌트 기반으로 동적으로 데이터를 내려주면 설계한 대로 UI를 만들어준다.
(SPA 또는 모바일 개발시 토대로 사용하고.. 페이스북에서 제공하고...)

특징

컴포넌트 기반 구조
리액트는 UI를 여러 컴포넌트 단위로 쪼개 사용할 수 있습니다.
컴포넌트 단위로 쪼개져 있어, 코드의 가독성이 올라가고, 중복된 코드가 사라져 재사용성이 올라갑니다.
(예를 들어, 어떤 다이얼로그를 만드는 컴포넌트가 있다면, 여기에 각 필요한 요소만 집어넣어 사용할 수 있겠...)

Data Flow
리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
대충 부모에서 자식으로 데이터를 전달하며, 전달된 데이터가 갱신 시 뷰를 갱신하는 것을 말한다.

Props, State
Props 은 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. Props는 부모 컴포넌트에서만 변경 가능.
State 는 데이터를 동적으로 변경하거나 동적인 데이터를 다룰 때 사용한다.

JSX
javascript XML 의 약자로, React 컴포넌트에서 사용할 마크업 언어이다.
HTML 과 비슷하게 생김..

Virtual DOM

리액트에서는 Dom Tree 구조를 가상의 Dom 으로 가지고 있습니다.
어떤 이벤트가 발생할 때마다 Virtual Dom을 만들고, 다시 그릴 때마다 실제의 Dom과 비교하여, 변경이 필요한
최소한의 사항만 실제 Dom에 반영합니다. (속도 개선)

참고

SPA 란 Single Page Application 의 약자로, 요즘 웹 개발에서 자주 사용하는 기술이다.
기존의 방식은 데이터를 받아서 화면에 뿌려 화면 전체를 렌더링 하는 방식이었는데,
SPA 는 내가 필요로 하는 영역만 렌더링함으로써 불필요한 리소스를 줄이며, 효율적이고 빠르다.
하지만, 처음 화면에 로딩될 때 기다리고 있으므로, 로드하는 스크립트가 클 경우에 로딩 시간이 좀 걸릴 수도 있다.

SPA 의 대표적인 라이브러리로 React, Vue, Angular(프레임워크라고도 함..)가 있다..