안경잡이개발자

728x90
반응형

  리액트(React)UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리입니다. 그러므로 HTML과 자바스크립트를 할 수 있다면 리액트도 어렵지 않게 사용할 수 있습니다. 또한 리액트는 라이브러리라는 점에서 다른 라이브러리들과 함께 사용할 수 있어 효율적입니다. 무엇보다 리액트는 오픈소스 커뮤니티가 매우 방대하다는 장점이 있습니다.


  다시 말해서 리액트(React)를 배우기 전의 선행 과정은 JavaScript입니다. 또한 추가적으로 jQuery와 같은 다른 라이브러리를 사용해 본 경험이 있다면 리액트의 장점 및 필요성에 대해서 보다 쉽게 이해할 수 있을 것이라고 생각합니다.


  이 강좌는 초반부에는 리액트의 개요 및 사용 방법에 대해서 다루기 때문에 조금 지루할 수 있습니다. 다만 1시간 가량만 실습을 하더라도 기본적인 사용 방법에 대해서 알 수 있으며, 이후에는 바로 실습을 진행하며 공부하게 되므로 재미있게 학습하실 수 있습니다.


  ▶ 리액트 오픈소스: https://github.com/facebook/react



  리액트(React) 오픈소스는 별점이 10만 개가 넘는 유명한 프로젝트입니다. (그래서 리액트를 제대로 다룰 줄 모르는 저는 마치 저만 쓸 줄 모르는 것 같은 소외감을 느끼곤 했습니다.) 또한 MIT 라이센스를 따른다는 점에서 상당히 자유롭게 사용할 수 있는 편입니다.


※ 리액트의 특징 ※


  - 선언적(Declarative): 리액트는 대화형 UI를 작성하기에 유리합니다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 합니다.


  - 컴포넌트 기반(Component-Based): 캡슐화된(Encapsulated) 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있습니다.


  - 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있습니다.


  이러한 리액트는 공식 문서를 읽으면서 바로 공부를 시작해 볼 수 있습니다.


  ▶ 리액트 학습 사이트: https://reactjs.org/docs/getting-started.html



  또한 기본적으로 리액트는 단순히 웹 환경에서 돌릴 수 있다는 점에서 굳이 우리 로컬(Local) 컴퓨터에 개발 환경을 구축하지 않아도 충분히 온라인 상에서 소스코드를 테스트 해 볼 수 있습니다.


  ▶ 리액트 사용해보기: https://reactjs.org/redirect-to-codepen/hello-world




※ 리액트의 장점과 단점 ※


  리액트는 뛰어난 성능을 가지고 있으며 클라이언트 렌더링 뿐만 아니라 서버 사이드 렌더링도 지원합니다. 그래서 Ajax 등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있습니다. 이러한 검색 엔진 최적화 문제는 상당수 SPA 프로젝트가 가지는 문제입니다.


  또한 리액트는 이미 많은 웹 서비스가 채택한 기술이라는 점에서 그에 따라서 오는 부가적인 장점이 있습니다.


  ▶ 리액트를 사용한 서비스들: https://github.com/facebook/react/wiki/Sites-Using-React


  확인을 해보시면 페이스북(Facebook), 인스타그램(Instagram) 등 유명한 서비스가 포함되어 있습니다.


  (+ 추가)


  또한, 리액트를 시작하기 전에 자바(Java), C++ 등을 해 본 사람을 위해서 이것이 무슨 라이브러리인지 쉽게 설명해드리겠습니다. 기존에 웹 사이트를 만들 때에는 보통 프론트 엔드 부분을 객체 지향적으로 작성하지는 않았어요. 백 엔드에서나 객체 지향 기법을 적절히 따르면서 개발했죠. 하지만 리액트는 프론트 엔드 또한 매우 객체 지향적으로 작성하도록 해주는 라이브러리라고 보시면 됩니다.


  그리고 기존에 JavaScript 및 jQuery까지 사용해보신 분들이라면 리액트(React) 과정은 하루에서 이틀 정도 잡으시고 빠르게 끝내시는 것을 추천드립니다. 어렵게 생각하지 마시고 단순한 라이브러리 따위 하루만에 정복하겠다는 거만한(?) 마인드로 공부하시면 좋아요.

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0