[TIL] React 배우기 - 1

croissant·2021년 7월 18일
0

TIL

목록 보기
3/4

React???

  • 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다.
  • 앵귤러가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공한다. 따라서 전역 상태 관리나 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다. 리액트 팀에서 create-react-app 이라는 툴을 제공하여 직접 구축해야 하는 번거로움을 줄여주고 있다.

React의 필요성

코드의 길이가 천 줄 만 줄 이라고 가정한다면, 한 눈에 코드가 들어오지 않아 가독성이 떨어질 것이다. 이때 코드의 덩어리를 안 보이게 다른 곳에서 작성을 해두고 같은 이름의 의미를 갖는 컴포넌트를 작성하게 된다면 코드상에선 쉽게 보이고 실제로 웹페이지에서 표시될 때는 코드가 보이는 기술이 리액트의 필요성이다.
또한 실시간으로 변경내용 업데이트되기 때문에 유지보수 편해지는 장점이 있다.

React의 3가지 특징

1. JSX 문법

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 준다.

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

JS 안에서는 저런 문법 사용이 불가능 하지만, JSX는 이를 가능하게 해준다. 아래 코드를 보시면 이 JSX가 얼마나 편한지 알 수 있다.

class Hello extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

JS 문법 같아 졌지만, HTML코드는 저렇게 하나의 div만 있는 것도 아니고 복잡할텐데, 지금처럼 리액트를 짜게 되면 개발자는 매우 힘들 것이다. 하지만 JSX의 사용으로, 리액트의 사용성은 굉장히 증가했다고 할 수 있겠고 대표적인 특징이 되었다.

2. Component 기반

리액트는 컴포넌트 기반 라이브러리다, 컴포넌트 기반이라는 것은 기존의 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할 해서 코드의 재사용성과 유지보수성을 증가시켜 준다.
아주 긴 HTML 코드를 적을 때가 있을 텐데, 그 코드의 일부를 수정해야 한다고 할 때 그 부분을 찾는 것부터 시작해서 내가 지금 수정한 코드의 부분만 수정되어야 하는데, 잘못하고 다른 부분을 건드리면 문제 해결을 하는게 아니고 도리어 문제를 키우게 된다.
컴포넌트 기반인 React로 개발을 하면 HTML 코드를 부분 부분 파일로 담아서 어떤 부분을 수정해야 한다고 하면 그 부분의 파일만 수정하면 된다.

3. Virtual DOM(가상 DOM)

가상 DOM은 기존 DOM*의 한계를 탈피하기 위해서 나온 대안이다.
DOM이란? Document Object Model 단어 그대로 문서 객체 모델. 우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델 이라고 생각하면 된다.

DOM의 문제는 일단, DOM의 구조는 트리 구조로 되어 있다. 만약 개발자가 어떤 DOM의 요소를 하나 수정하는 함수를 만들고 실행시킬때, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산된다.) 레이아웃을 만들고 하는 과정이 다시 반복된다.
이말은, DOM의 요소를 굉장히 많이 수정한다고 할 때, 불필요한 연산이 매번 일어난다는 것이다. 렌더트리가 매번 재생성 되는것은 좋지 않기 때문에, 가능하면 한번에 모든 작업이 진행되는 것이 좋다.

이 문제를 해결하기 위해 가상 DOM이 등장 하였다. DOM 자체가 추상화 개념인데, 거기에 한번 더 추상화를 한 것이 가상 DOM 이다.
가상 DOM은 변화를 가상 DOM에서 미리 인지해 변화시킨다. 이 작업은 실제 DOM이 아니기 때문에 렌더링도 되지 않고 연산 비용이 비교적 실제 DOM 보다는 적다. 그 가상 DOM의 변화를 마지막에 실제 DOM에게 던져주어, 모든 변화를 한번에 렌더링 되게 한다.
만약 직접 DOM을 업데이트하게 된다면 그 부분만 업데이트하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데, 가상 DOM은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜준다.

결론적으로 가상 DOM을 사용하는 이유는, 실제 DOM을 직접 변경할 수는 있지만, 그 작업이 굉장히 값비싼 작업이기 때문에, 가상 돔에서 미리 최적화를 한 번 해준다는 것 이다.

출처: https://phant0m.tistory.com/29 [Devlog]
출처: https://berkbach.com/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2

profile
에러에 진심인 편

0개의 댓글