React 란 ?
React란, 유저 인터페이스를 만들 수 있는 라이브러리이다. 즉, web UI를 만들 수 있는 라이브러리로 볼 수 있다.
React를 한 단어로 정의하자면, 컴포넌트들로 이뤄진 라이브러리이다!
✏️ 첫번째 중요한 컨셉 – Components
컴포넌트란 한가지의 기능을 수행하는 UI 단위를 의미한다. 이 컴포넌트는 서로 독립적이고, 고립되어있으며, 재사용이 가능한 것을 의미한다.
각각의 리액트 어플리케이션은 하나의 컴포넌트로 이루어져있다. 제일 상위에 존재하는 컴포넌트를 ‘root’ 라고 하며, 그 안에는 Navbar 컴포넌트, Content 컴포넌트, 또 그 안에는 버튼 컴포넌트 .. 이렇게 여러 컴포넌트가 합쳐져있다.
이렇게 독립적인 컴포넌트들을 조합해서 만들어놓은 것을 리액트 어플리케이션이라 말할 수 있다.
Components tree
웹페이지의 각 태그들이 DOM Tree 로 변환되어 브라우저에서 이해할 수 있도록 변환하는 것과 마찬가지로, 리액트의 컴포넌트들도 트리 형식으로 만들어져있다.
컴포넌트는 다른 컴포넌트와는 독립적으로, 그 컴포넌트에 해당하는 로직과 state가 들어있기때문에 cohesive 하다고 볼 수 있다.
일반 웹사이트 구조를 분석할 때와 동일하게 박스 단위 (컴포넌트 단위)로 구조를 생각하는 것이 좋다.
또 너무 디테일하게 컴포넌트를 나누기 보다는 재사용이 가능하고, 독립적인 단위로 나누는 것이 중요하다.
컴포넌트 생성
import React, { Component } from 'react';
class LikeButton extends Component {
state = {
numberOfLikes : 0,
};
render() {
return <button>
{this.state.numberOfLikes}
</button>;
}
}
export default LikeButton;
컴포넌트는 React에서 제공하는 컴포넌트 클래스를 상속하고, 그 클래스 안에는 State 부분 , Render 부분으로 나누어진다. State는 데이터를 나타내는 오브젝트이고, render 부분은 jsx 이다.
리액트는 State 에 있는 오브젝트가 변경이 되면, render 함수가 자동으로 다시 호출된다. 그래서 변경된 state 값이 화면에 나타날 수 있도록 render가 반복적으로 호출된다.
즉, state 가 데이터 / render 가 사용자에게 보여지는 UI 라고 생각하면 된다.
✏️참고
React는 부모<>자식이 있는 트리구조를 가지기 때문에, 제일 상위의 Root 컴포넌트 안에 state의 데이터가 변경이 되면, 그 자식 컴포넌트의 render 함수가 계속해서 호출된다.
근데 State가 변경이 될때마다 모든 render함수가 다시 호출이 되는 것은 성능에 문제가 있지 않을까 ?
결론은 그렇지 않다.
리액트는 Virtual DOM Tree 가 있는데, 가상의 DOM Tree로 리액트의 컴포넌트들이 메모리에 저장되어 있다. 바로 리액트의 모든 구조들이 DOM Tree에 업데이트 되는 것이 아니라, 컴포넌트에 변동사항이 생겨서 자식 컴포넌트의 render 함수가 호출이 되면, 리액트는 이전의 DOM Tree와 비교를 해서 실제로 어떤 부분이 업데이트 되어야하는지 계산해서 필요한 부분만 DOM Tree에 업데이트한다.
그래서 render 함수가 많이 호출되어도, 성능에 대해서는 크게 걱정하지 않아도 된다.
✏️ 두번째 중요한 컨셉 – Rendering
리액트는 데이터가 변경이 될때마다 어플리케이션 전체를 다시 렌더링한다. 그리고 그것이 리액트로 어플리케이션을 개발하는 이유이다.
개발자들이 데이터가 변경이 되면 해당 부분을 업데이트해야하는 걱정을 하지 않아도 되는게, state에 맞게 render 함수에서 어떻게 표기될건지 미리 정의 해두면 리액트가 알아서 상태가 변경이 되면 render 함수를 다시 호출해준다.
render 함수를 계속해서 호출해도 여전히 리액트가 빠른 이유는 가상의 DOM Tree로 메모리에 보관해놓고 있기 때문에 업데이트가 일어날때마다 이전의 DOM Tree와 비교해서 정말 업데이트 되는 내용이 있다면, 그 때 실제 DOM Tree를 업데이트한다.
그리고 매번 업데이트 하는 것이 아니라, 업데이트 해야하는 내용을 모았다가 한번에 다같이 업데이트하기 때문에 빠른 성능을 보장할 수 있다.
60fps 를 유지하는 것이 중요한데, 리액트는 기본적으로 이것을 보장한다.
