React가 나에게 왜 필요할까?
개발을 공부하면서 처음부터 HTML, CSS, Javascript 순으로 공부하며 그에 대해
익숙해지고 javascript에 대한 불편함을 별로 느끼지 못하고 있었습니다. 만약 제가 React를 먼저 접하고 vanilla javascript로 딱히 프로젝트도 해보지 않았고 아무것도 해보지 않았다면 저는 React가 뭐가 좋은 것인지 몰랐을 것 같습니다.
저에게 React가 왜 필요한지 또 어떤 점이 좋은 것인지 간단히 정리를 해보고자 합니다.
React의 장점
#1. Component
바닐라 자바스크립트로 개발을 해보고 리액트를 공부하고 있는 도중 느낀 가장 큰 매력은 '통짜'가 아니라는 것입니다. React는 component단위로 view들을 관리하는데 그에 대한 상태를 관리하고 불필요한 리렌더링을 최소화 하는 것이 가장 큰 매력이라 생각이 들었습니다. 아직 리액트를 열심히 공부 중이고 리액트에 대한 모든 것을 잘 아는것은 전혀 아닙니다만, 기존에 바닐라 자바스크립트로는 불가능했던 것들을 가능하게 해주는 가장 큰 것이 이 component라는 아이디어 인 것 같습니다.
Component의 재사용성은 아주 훌륭하고 단위별로 유지 보수가 가능할 것이기 때문에 추후 관리도 아주 수월할 것이라 생각합니다.
#2.Virtual DOM
처음에는 이 Virtual DOM이라는 컨셉이 잘 이해가 되지 않았습니다. React는 html을 렌더링 하는데 아주 특이한 구조를 가지고 있습니다. 자바스크립트 파일에 html코드를 작성한다는 점입니다. 어떻게 이런게 가능한건지 의아했는데 이 것은 실제 html 코드가 아니라 'BABEL'에 의해 컴파일되는 자바스크립트 코드라는 것을 알았고, 이 것이 어떠한 장점이 있는지 생각을 해보았습니다.
다음의 코드를 살펴봅니다.
class HelloReact extends React.Component {
render() {
return (
<div>
<div>Hello {this.props.name}</div>
<div>I am {this.state.otherName}</div>
</div>
);
}
}이 코드를 살펴보면 자바스크립트 파일 내에 div와 같은 html코드가 있는 것을 볼 수 있습니다. 저 것은 모두 'BABEL'로 인해 컴파일 되어 html코드(마크업)로 변환되어집니다. 이런 형태의 코드를 JSX라고 합니다.
JSX
리액트는 Javascript 내에서 필수적으로 babel을 통한 컴파일을 한다. 따라서 '중괄호' 안에 유효한 모든 자바스크립트 표현식을 넣을 수 있다. ex) this.props.name 등 컴파일이 끝나게되면 JSX는 정규 자바스크립트 함수 호출이 되고 자바스크립트의 객체로 인식된다.
또한, html이 아니기 때문에 각자 어트리뷰트의 선언 방식이 조금씩 다르다.
위의 코드를 살펴보면 div안에 Hello {this.props.name}과 I am {this.state.otherName}이 있다. div는 분명 html의 선언이지만 저 파일은 자바스크립트 파일입니다. 하지만 저 div들은 html로 렌더링 될 것 입니다. 그리고 Virtual Dom의 특성은 여기서 나타납니다.
만약 this.props.name이 'React', this.props.otherName이 'Node' 라면 브라우저에는 Hello React와 I am Node가 출력될 것 입니다. react는 render을 호출하여 이 코드를 리턴할 것 입니다. 하지만 이 것은 바로 DOM에 저장되지 않습니다. Virtual DOM에 저장되어 기존의 DOM과의 차이점을 찾아내고 그 차이점만을 리턴하는 것이 react의 특성이라 볼 수 있습니다.
왜 굳이 그런 작업을?
그렇다면 react의 프로세스는 render을 호출하고 리턴된 코드를 Virtual DOM에 저장 => Virtual DOM을 통해 비교작업 => 최종 리턴 이라는 작업을 거친다는 이야기인데 복잡해 보입니다.
하지만 이 것은 오히려 이득입니다. 실제로 바뀌지 않는 부분까지 통으로 렌더링하고 리턴하는 것은 엄청나게 많은 연산이 요구되는 과정이라고 합니다. 이러한 부분을 Virtual DOM이라는 가상의 돔에 저장한 후 실제 DOM과의 비교 후 렌더링 한다면 많은 연산처리를 아낄수(?) 있을 것이라고 봅니다.
내가 느낀 점 🙋
필자가 리액트를 조금이나마 경험해보면서 느낀 장점을 대충 정리해보면 다음과 같습니다.
- 레고처럼 따로 따로 쌓을 수 있는 '컴포넌트' 들 (함수들을 분리해야 하기 때문에 강제로(?) 코드가 깨끗해진다.)
- 'JSX'로 html코드와 자바스크립트 코드를 통으로 같이 쓸 수 있다는 점.
항상 동적인 정보를 처리할 때 바닐라 자바스크립트 에서는 특정 돔을 선택하고 거기에 맞는 정보를 자바스크립트를 사용하여 지정하고 값을 넣어주며 왔다 갔다 했지만 react에서는 한 번에 처리 가능!
- 'Virtual DOM'으로 연산과정 랜더링 최적화 (최소한의 랜더링만 하니 당연히 성능이 좋을 것이고 연산이 빠를 수 밖에 없을 것이라 생각)
- 더 이상 같은 UI들 복사 복붙 no! 이미 만들어놓은 컴포넌트로 재사용 하자! (어? UserList가 여기에도 필요하네..? <UserList / > 끝!)
이렇게 좋은 react 라이브러리를 열심히 연습하고 사용해서 좋은 프론트엔드 더 나아가 풀 스택 개발자가 되도록 노력을 해야할 것 같습니다.
참고 📝
