본문 바로가기
개발일지 Dev Diaries/회고 Retrospective

주특기 결정 : React (리액트)

by 이땡칠 2022. 2. 25.

리액트 ? 

 

- IT 업계에서 가장 떠오르는 키워드.

- 페이스북에서 만든 오픈소스 자바스크립트 라이브러리 중 하나.

* 라이브러리 ? 프로그래밍으로 무언가를 만들어 낼 때 도움을 주는 기능들을 묶어놓은 모음

 

리액트는 자바스크립트 라이브러리. 즉, 웹 브라우저에서 실제 눈으로 볼 수 있는 부분을 자바스크립트 프로그래밍으로 만들어 내는데 도움을 주는 목적으로 만들어졌다라고 보면 된다. 

 

처음에는 페이스북의 가장 핵심 기능 중에 하나인 뉴스피드를 쉽게 개발할 목적으로 만들어졌는데,

페이스북이 보기에도 이건 정말 잘 만들었다는 생각이 들었는지 다음에 바로 인스타그램에도 적용하고

그 다음해에 페이스북 개발자가 아닌 사람들도 사용할 수 있도록 오픈소스로 공개해서 본격적으로 알려지게 되었다.

 

 

프론트엔드 개발을 처음 공부하는 많은 초심자가 헷갈려하는 것 중에 하나가 

리액트와 자바스크립트가 서로 상반되는 개념이라고 생각하는 것. 

 

여기서 확실하게 짚고 넘어가자면 두 개는 상반되는 개념이 아님.

자바스크립트는 프로그래밍 언어,

리액트는 자바스크립트라는 프로그래밍 언어를 쉽게 쓸 수 있도록 도움을 주는 라이브러리.

 

 

리액트의 장점

1. 동일한 기능을 자바스크립트로 개발하는 것에 비해 훨씬 편하게 개발할 수 있음.

사실 자바스크립트는 넷스케이프라는 회사의 개발자 한 명이 단 열흘만에 만든 급조품으로 시작을 했음.

그래서 자바스크립트를 처음 접한 초심자의 관점에서는 이 언어는 장난감처럼 가볍고 쉽게 다룰 수 있는 이미지이지만, 

언어 자체가 애초부터 초기 설계를 할 시간이 부족했기 떄문에, 자바스크립트를 파고들고 파고들다 보면 점점 더 이해할 수 없는 기능을 발견하거나 아니면 예상치 못한 동작을 할 때가 너무 많음. 

 

그래서 자바스크립트가 익숙하지 않은 초심자일수록 이 언어를 직접 사용해서 무언가를 구현하는 것보다는, 자바스크립트를 사용하는데 도움을 주는, 예를 들어 jQuery나 리액트를 사용하는 게 훨씬 더 편하고 안전하게 웹서비스를 구현할 수 있는 샘.

 

특히 리액트는 초심자가 자바스크립트를 다루면서 실수를 할만한 여지를 줄여주는 다양한 기능들이 포함되어 있음. 

기능을 덕지덕지 묶어서 구현하지 않고, 기능별로 나눠서 구현할 수 있는 MVVM 패턴을 지원한다던가

 

 

아니면 자바스크립트를 사용할 때 저지르는 실수를 사전에 방지할 수 있도록 자바스크립트를 새롭게 개조한 JSX 등등 

다양한 기능이 포함되어 있음. 

그래서 왠만하면 리액트를 사용하는 게 훨씬 더 편하고 안전하게 웹서비스를 만드는 방법이라고 볼 수 있음. 

 

 

 

2. 필요할 때 간편하게 쓸 수 있는 다양한 컴포넌트(Component)의 존재

프론트엔드 개발을 할 때 가져다쓰면 편리한 도구들이 많은데, 이 도구를 리액트에서는 라이브러리 내지는 컴포넌트라고 부르고 있음. 

 

컴포넌트의 간단한 예시

1) 버거 메뉴 : react-burger-menu

2) 무한스크롤

3) 노티피케이션(Notification)

4) 탭

5) 로딩 메뉴 

 

 

3. 페이스북이라는 대기업의 지원

페이스북의 지원을 받는 오픈소스이기 때문에, 페이스북에 의해 꾸준히 유지보수 되고 있음. 

 

 

 

 

 

 

출처 : https://youtu.be/nT4OWJJjtJg

 

댓글