React 첫걸음

React? 

개발하면서 한번쯤은 들어봤을 이름 리액트! 대충 페이스북에서 만들었다. 라이브러리다 뭐다 뭐다 ... 정도는

들어봤을 것이다. 리액트란 한방에 정의하자면 'UI 컴포넌트 라이브러리' 이다. 리액트는 특별한 템플릿 언어가 아닌 

자바스크립트를 이용해서 만든다.  템플릿 엔진과 제이쿼리에 익숙해져 있는 개발자들은 이게 무슨소리인가 할것이다.. 필자도 그랬다..  우선 컴포넌트라는게 뭔지 알아보자. 아래 그림을보자

 

 

리액트 컴포넌트

그림은 리액트 컴포넌트가 무엇인지 알려주는 사진이다. 즉 화면 구성 하나하나를 컴포넌트라 칭하는 것이다. 이 컴포넌트는 다른페이지 에서도 재활용이 가능한것! 여러 컴포넌트로 UI를 구성하는 이런 방식은 React의 핵심 철학이다.

React 컴포넌트는 매우 독립적이며 특정 관심사에 집중된 기능 블록이다. 컴포넌트도 크게 2가지로 개념이 나뉜다.

 

- Smart 컴포넌트 : 데이터를 처리하는 컴포넌트 (state)

- Dumb 컴포넌트 : 데이터를 처리하지 않는 컴포넌트 (prop)

 

아직은 이 개념을 몰라도 좋다. 리액트는 컴포넌트로 UI를 구성하고 이는 리액트의 철학이며 크게 2가지 컴포넌트로 나뉜다 정도만 알자.

 

React 장점

 리액트의 큰장점은 바로 가상 DOM 이지 않을까 싶다. 리액트를 사용하기전 개발환경을 생각해보자. 제이쿼리로 막 어떤값을 넣고 수정했다고 가정하자. F5새로고침을 눌러 다시 확인해 보았을 것이다. 특정한 값을 바꿔도 결국은 DOM을 재로딩 해야 한다. 리액트는 가상 DOM을 도입해 특정한 값이 바뀌면 그부분만 수정이 된다. 즉 F5 새로고침 없이!!

아래 링크는 가상돔에 대해 잘 설명해주는 3분짜리 애니메이션 영상이다. 한번 보고나면 이해가 갈것이다.

https://www.youtube.com/watch?v=BYbgopx44vo&t=59s

React 가상 DOM 이란?

React 단점(필자 생각)

리액트 단점은 지극히 필자 주관적인 생각을 쓰겠다. 모듈화를 하고 재사용성이 증가 될것이고, 가상 돔을 이용해 빠르게 데이터가 렌더링 될것이다. 그래 좋다 좋아. 하지만 결국은 리액트의 철학을 공부해야 한다. 대형 어플리케이션 사이트가 아니면 생각을 다시 해보자, 리액트를 도입함으로써, 기간 안에 프로젝트를 끝낼 수 있을지 말이다. 

 

필자가 다니는 회사는 React-admin 라이브러리를 사용해 관리자사이트를 리액트로 운영하고 있어 공부를 해야되는 운명에 처했다. 포스팅이 좀 늦어졌지만 시간날때 마다 리액트 포스팅을 쭉하겠다. 

 

다음편에는 리액트 실행법을 포스팅하겠습니다.