리액트란?
가상 DOM(Virtual Document Object Model)과 JSX(JavaScript XML) 방식으로 동작하는 라이브러리
- 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨
- facebook에서 제공해주는 프론트엔드 라이브러리이며, 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용
💫리액트 사용 이유💫
가상돔(Virtual DOM)을 사용해 보다 효율적으로 우리가 원하는 페이지를 브라우저에 빠르게 그려주기 때문
[ JQuery vs React ]
- 많은 수의 DOM조작을 하지 않는다면 jQuery나 React나 큰 차이 없음
- 간단한 웹을 만들땐 jQuery는 좋은 반면, React는 보다 정교한 기능을 수행하는 데 도움이 되며, 주로 UI개발, DOM 조작 등을 강조
📌JQuery
- HTML/DOM 직접 조작
- HTML 이벤트 메서드를 쉽게 사용 > 간단한 처리나, 모션(애니메이션) 구현에 적합
- 많은 수의 DOM 조작이 일어날 경우 DOM을 재구성 할때마다 성능 저하
📌React
- 상태에 따라 DOM을 조작
- 가상 DOM을 사용해 실제 DOM과의 차이점을 계산해서 최소한의 변경만 적용
- 컴포넌트 기반의 대규모 어플리케이션에 적합
[ React 특징 ]
- Data Flow
- Component 기반 구조
- Virtual Dom
- Props and State
- JSX
📌Data Flow
: React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐
대규모 애플리케이션의 경우에 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 함
📌Component 기반 구조
Component는 독립적인 단위의 소프트웨어 모듈(소프트웨어를 독립적인 하나의 부품으로 만드는 방법)
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듦
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽고 재사용성이 높음
따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점이 있음
class App extends Component {
render() {
return (
<Layout>
<Header />
<Navigation />
<Content>
<Sidebar></Sidebar>
<Router />
</Content>
<Footer></Footer>
</Layout>
);
}
}
위와 같이 Header, Footer같은 구조등을 컴포넌트로 만들고, 이를 조합해서 root component를 만드는 방식
📌Virtual Dom
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM(가상의 Document Object Model)으로 가지고 있음
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있음
DOM (Document Object Model)
하나하나의 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저는 분석해 페이지를 띄워주는 방식
이런 HTML element들을 tree형태로 표현한 것
Virtual DOM (Virtual Document Object Model)
실제 DOM과 같은 내용을 담고 있는 복사본 > 복사본은 실제 DOM이 아닌 JS 객체형태로 메모리 안에 저장되어 있음
- Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유하지만 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없다는 점
> 때문에 화면에 보여지는 내용을 직접 수정할 수 없음 - 실제 DOM과 다르게 직접적으로 브라우저 화면의 UI를 조작할 수 있게 해주는 API는 제공하지 않음
> 가상돔은 실제 브라우저에 접근하는 것이 아니고 메모리에 저장되어 있는 자바스크립트 객체에 불과하기 때문에 가상돔에 접근하고 수정하는 것은 매우 가볍고 빠른 작업이 됨
💫참고💫
리액트는 항상 두개의 가상돔 객체를 가지고 있음
- 렌더링 이전 화면 구조를 나타내는 가상돔
- 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔
리액트는 STATE가 변경될 때마다 Re-Rendering이 발생하고 이 시점마다 실제 브라우저가 그려지기 이전에 새로운 내용이 담긴 가상돔을 생성
📌Props and State
[ Props ]
- Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터 > 읽기 전용 데이터
- 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있음
- 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터(like 파라미터)
[ State ]
- State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
- State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용
- 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적
- 컴포넌트 내에서 상태를 저장하고 변경할 수 있는 데이터(like 변수)
📌JSX
React에서 JSX 사용이 필수는 아님
JSX란 ?
: Javascript를 확장한 문법
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React 공식문서
JSX 소개 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
참고🐣