ReactJs에 대한 이해

ReactJs

React는 View, 즉 사용자 인터페이스(UI)를 효과적으로 구축하기 위해 사용하는 자바스크립트 기반 라이브러리

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식,

화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결됨

React는 페이스북에서 개발하였음

 

ReactJs 특징

1. 선언적 (Declarative)

React는 선언형 성격에 맞게 컴포넌트를 얻기 위해 JSX(JavaScript XML) 문법을 통해 구현

※ JSX는 아래에서 다시 설명

2. 컴포넌트 기반 (Component-Based)

스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들어 이를 조합하여 UI를 개발할 수 있음

컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성되어 다양한 형식의 데이터를 앱 안에서 손쉽게 전달하고

DOM과는 별개로 상태를 관리할 수 있음

3. 한 번 배워서 어디서나 사용 (Learn Once, Write Anywhere)

React는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있기 때문에 기존의 UI를 다른 화면에서 다시 쓰거나

다른 프로젝트에서 다시 쓸 수 있음 → 높은 재사용성

기술 스택의 나머지 부분에는 관여하지 않아 기존 코드를 재작성하지 않고도 새로운 기능을 이용해 개발 가능

React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱으로도 만들 수 있음

4. 가상돔(Virtural DOM)

React는 서버와의 데이터 통신과는 별개로 DOM 객체를 직접적으로 조작해야하는 기존의 웹 화면 개발방식과 달리

DOM 객체를 직접적으로 조작하지 않고 데이터가 변화할때 변경사항이 적용된 Virtual DOM을 생성함

그 다음 실제 DOM과 VirtualDOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다

만약, 실제 DOM 트리에서 변화가 바로바로 반영된다면 하나의 동작마다 전체 DOM 트리가 변경되어,

렌더링 과정이 매번 일어나 웹 브라우저의 동작에 많은 리소스가 들어가게 됨

이렇게 글로 설명하면 이해가 잘 되지 않으니 영상을 통해 이해해보도록 하자

출처 : https://www.youtube.com/watch?v=BYbgopx44vo

이와 같이 가상 DOM을 이용하면 실제 DOM에 반영하기 전에 가상돔에서 먼저 DOM의 변경을 인지하고

내용을 반영하기 때문에 불필요한 리렌더링(Re-Rendering) 횟수를 줄일 수 있다

React는 이런 가상돔(Virtual DOM)을 활용한 대표적인 프레임워크이다

※ DOM(Document Object Model) :  웹 페이지를 다루는 태그들을 JavaScript가 이용하도록 브라우저가 트리구조로 만든 객체 모델

5. State와 Props

React에서 데이터를 다루는 방법으로 props와 state 두 가지가 있다

Props는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터로, 읽기만 가능하고

State는 컴포넌트 내부에서 가지고 있는 값으로, 변경이 가능하다

출처 : https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

그림에 따르면 state는 비동기적으로 변경될 수 있고, this.setState를 이용하여 변경할 수 있다고 한다

6. 단방향 데이터 흐름(Unidirectional Data Flow)

React에서는 단방향 데이터 바인딩을 지향한다

React에서 데이터를 다루는 방법 두 가지를 위에서 다루어 보았다

그 중 Props를 통해서 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달할 수 있는데,

반대로 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달할 수는 없다

출처 : https://medium.com/hivelab-dev/react-js-tutorial-part1-c632e34fc32

---

JSX

JSX(JavaScript XML)는 XML과 같은 문법을 사용하는 ECMAScript의 확장

JSX는 수많은 개발자들에게 친숙한 문법(HTML과 유사)을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공함

---

프론트엔드 분야를 공부하기 위해 몇달 전에 React와 PHP를 이용하여 간단하게 조작법만 익혀뒀는데,

역시 공부라는 것은 꾸준히 해야 하나보다 .... 대충 코드 보면 무슨 소린지는 알겠으나 막상 하려고 하면 아무것도 생각나지 않는다

그래서 처음부터 다시 시작하려고 한다..!!!! 의지 불끈

[참조]

• https://reactjs.org/
• https://ko.wikipedia.org/wiki/리액트_(웹_프레임워크) 
• https://namu.wiki/w/React(라이브러리)