what is React?
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 생겨났다. 대표적으로 React, Angular, Vue 가 있다.
So basically...
React is a JavaScript library for building user interfaces.
리엑트에는 Virtual Dom 이라는게 있다.
그렇다면 What is Virtual Dom...?
링크텍스트에 따르면..
The Vitual DOM (VDOM) is a programming concept where an ideal, or 'virtual' representation of a UI is kept in memory and synced with the 'real' DOM by a library such as ReactDOM.
번역해보면 VDOM은 이상적인 혹은 가상의 UI를 나타내는 일종의 프로그래밍 컨셉이라고 한다. 실제 돔을 이용하면 나타나는 비효율성을 줄이기 위해 비교적 가볍고 변경이 쉬운 VDOM이 생겨났다.
1. Create a VDOM with a new state
2. Compare it with older VDOM using diffing.
3. Update only different nodes in real DOM.
4. Assign new VDOM as an older VDOM.
추상적인 개념은 이해가 가는데 ..
자세한 건 나중에 더 봐야 할 것 같다. 지금은 일단
Virtual Dom = Blueprint 정도로 이해하면 될 것 같다.
중요한 건 VDOM을 이용하면 manipulate Dom을 할 필요가 없다는 것!
VDOM을 통해 component의 state가 변하면 react가 자동으로 DOM을 변경된 state로 update!!
'React' is called React because
it essentially reacts to the state changes!!
Difference Between React and Angular??
Angular is a framework whereas React is a library.
MVC(Model-view-Controller) (ex. Angular, Vue)와 다르게 리엑트는 view만 rendering 하면서 view과 state와 sync되는가만 확인한다. 이와 같은 이유로 React는 API가 작기 때문에 다른 libraries와 같이 사용한다.
CRA( Create- React App) / Node.js & npm
CRA는 Create-React App의 약자로 리엑트 어플리케이션을 작동시키기 위해 페이스북 개발자들이 만든 개발도구이다. 리엑트는 오직 UI 기능만을 제공하기 때문에 개발자가 직접 개발환경을 구축해야 하는데 CRA를 이용하면 간단하게 개발환경을 세팅할 수 있다! CRA에는 바벨과 웹팩 같은 다양한 package가 포함되어 리액트 애플리케이션 실행을 돕는다.
Node.js는 자바스크립트가 브라우저 밖(서버)에서 동작하게 만들어주는 환경인데 프로젝트 개발에 필요한 주 도구들(바벨, 웹팩)이 Node.js기반이기 때문에 CRA와 함께 꼭 설치해 주어야 한다.
npm(node package manager)은 node package를 관리하게 위해 필요한 도구인데 npm을 설치하면 자동으로 설치된다.
본격적으로 React의 구성요소를 살펴보자.
먼저component라는게 있다..
component
: A piece of the UI.
We build a bunch of independant, isolated, resusable components and compose them to use complex user interfaces.
컴포넌트는 UI를 이루고 있는 독립적이고 재사용 가능한 구성요소이다!
Every React application has at least one component which we refer to as 'root component'. This compenent represents the internal applications and contain other child components. Every React application is essentially a tree of components.
class Tweet {
state = {};
render() {
}
//State = Data that we want to display when the component is rendered.
State(상태)는 컴포넌트가 렌더되었을 때 우리가 보여주고 싶은 데이터를
의미한다. Render는 UI가 어떻게 보여질지 나타내기
위해서 사용되는 메소드이다. 