React를 박살내보자ㅏㅏㅏㅏ

React는 Facebook이 만든 사용자 UI 구축을 위한 라이브러리다!

따라서 오직 사용자의 View에만 초점을 맞추고 있음!

즉, Routing 같은 기술이 리액트 자체에 들어가있지 않는다는 얘기!!

하지만 개발자들이 두고 볼 쏘냐~

리액트에 필요한 여러가지를 만들어놔서 사실상 프레임워크라고 봐도 무방할 정도!(지금까지 프레임워크인줄 알았어..)

 

뭐가 됐든, 리액트는 3가지 대표적인 특징이 있다

1. JSX 문법

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

아래 코드를 보자. 지금은 이해 못해도 괜찮괜찮!

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

뭔가 익숙한 HTML 태그가 보인다? 이게 바로 JSX !!

원래 JS 안에서는 저런 문법 사용이 불가능 하지만, JSX는 이를 가능하게 해줌.

 

그리고 JSX를 사용하지 않고도 리액트 개발을 할 수가 있는데요.

하지만 많은 리액트 개발자들은 JSX를 사용하는데, 아래 코드를 보면 JSX가 얼마나 편한지 알 수 있음.

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

이제 JS 문법 같아 졌지만, 생각해볼때 마크업 개발은 저렇게 하나의 div만 있는 것도 아니고 복잡할텐데, 지금처럼 리액트를 짜게 되면 개발자는 이것만 짜다 죽는다..

하지만 JSX의 사용으로, 리액트의 사용성은 굉장히 증가했다고 할 수 있겠고 대표적인 특징이 되었음!

 

2. Component 기반

리액트는 컴포넌트 기반 라이브러리!

컴포넌트 기반이라 함은 기존의 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할 해서 코드의 재사용성과 유지보수성을 증가 시켜주는 것!

 

프론트 작업 시, 아주 긴 HTML 코드를 적을 때 코드의 일부를 수정해야 한다고 한다면, 해당 부분을 찾는 것부터 시작해서 수정한 코드의 부분만 수정되어야 하는데 잘못하고 다른 부분을 건드린다면 문제 해결을 하는것이 아니라 도리어 문제를 키우게 됨.

 

컴포넌트 기반인 React로 개발을 하면 HTML 코드를 부분 부분 파일로 담아서 어떤 부분을 수정해야 한다고 하면 그 부분의 파일만 수정하면 된다. 따라서 다른 부분을 건드려 문제를 키우는 일이 발생하지 않음!

 

3. Virtual DOM

벨로퍼트님의 글을 보고 참고 !

가상 돔은 기존 DOM*의 한계를 탈피하기 위해서 나온 대안!

 

DOM이란? Document Object Model 단어 그대로 문서 객체 모델.

우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델 이라고 생각!

 

DOM의 예제

자, 그런데 이 DOM에 무슨 문제가 있느냐?

 

HTML 구조와 같이 DOM의 구조는 트리 구조로 되어 있음.

만약 프로그래머가 어떤 DOM의 요소를 하나 수정하는 함수를 만들고 실행시킬때, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됨.) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복됨.

 

이게 어떤 문제가 있냐면, 우리가 복잡한 SPA 개발을 통해서 DOM의 요소를 굉장히 많이 수정한다고 할 때, 불필요한 연산이 매번 일어난다는 것!

 

우리는 렌더트리가 매번 재생성 되는것을 좋지 않게 생각하기 때문에, 가능하면 한번에 모든 작업이 진행되는 것을 더 선호!

 

그 문제를 해결하기 위해서 가상 DOM이 등장!

DOM 자체가 추상화 개념인데, 거기에 한번 더 추상화를 한 것이 가상 DOM!

 

가상 돔은 변화를 가상 돔에서 미리 인지해 변화시킴.

 

이 작업은 실제 DOM이 아니기 때문에 렌더링도 되지 않고 연산 비용이 비교적 실제 DOM 보다는 적음.

그 가상 DOM의 변화를 마지막에 실제 DOM에게 던져주어, 모든 변화를 한번에 렌더링 되게 함.

 

그런데 이러한 생각은 우리는 충분히 가상 DOM을 사용하지 않고도 할 수 있었을 텐데, 왜 굳이 가상 DOM을 쓰는걸까?

 

만약 직접 DOM을 업데이트하게 된다면 그 부분만 업데이트하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데, 가상 돔은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜줌!

 

또한, 변경하려는 DOM이 변경되었는지, 변경되지 않았는지에 대한 각 동기화 정보를 알고 있을 필요가 없음과 동시에 하나로 묶어서 작업해주기 때문!

 

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

 

이번 리액트에 대한 전반적인 설명은 여기까지!!

다음 포스트에는 리액트 프로젝트를 생성하고 기초 문법을 살펴보자......

 

 

 

참고 글: medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2