이번에 vanillaJS로 프로젝트를 하면서 느낀 React의 장점은 다음과 같았다.
화면 리렌더링
사용자와의 인터렉션을 통해 값이 변화되면 화면을 다시 렌더링해주기 위해 직접 돔을 조작하고 수정하고 하는 행위들을 했었는데 React에서는 함수형 컴포넌트라 가정한다면 hook을 통해 상태관리만 해주면 이러한 복잡한 과정들을 자동화 및 추상화 해주기 때문에 편리했다.
불필요한 연산
화면을 최적화해주기 위해 신경써서 변화들을 묶어 DOM fragment에 적용시킨 후 DOM에 보내주었다면 React는 이것도 알아서 해준다.
JSX
createDom = (tagName, attrs) => {
const $dom = document.createElement(tagName);
for (const [key, value] of Object.entries(attrs)) {
$dom[key] = value;
}
return $dom;
};
this.createDom('input', {
type: 'text',
id: 'nickname',
className: 'nickname-input',
value: this.data.nickname || '',
placeholder: '닉네임을 입력하세요.',
});위와 같은 메서드를 이용하여 노드를 생성할 때 유용하게 사용했는데 react는 jsx를 통해 더 유용한 코드를 작성할 수 있게 해준다.
