react란?

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

react는 전세계의 개발자들 사이에서 가장 많이 사용되는 웹 프레임워크 중 하나이다. react는 반복되는 요소들을 만드는 것을 수월하게 해준다.

airbnb의 타일들

 

airbnb에서 파란색으로 표시된 부분들 각각은 다른 정보를 가지고 있다. 하지만 주황색처럼 한개의 타일로 묶일 수 있고 이렇게 만든 후, 각각을 커스터마이징하는 것이 훨씬 단순할 것이다.

일반적인 어플의 구조

매우 복잡해보이는 UI도 위와 같이 컴포넌트 트리로 나누어주면, 훨씬 이해하기 쉬워진다.

 

react는 바로 이 원리를 이용한다. 아무리 프로그램이 커진다하더라도 우리는 이를 구성요소의 재료 하나하나로 쪼갤 수 있다. 그렇게 재료들을 재사용하거나, 커스터마이징하는 것이다. 

 

이전까지 html, css, javascript를 쪼개어 생각했지만, 이제는 아래와 같이 셋을 합쳐 각자의 기능을 가진 구성요소 하나하나로 생각할 수 있다.

 

페이스북을 할 때, 우리는 새로운 소식이 왔을 때 새로고침할 필요가 없다. 상단 메뉴바에 있는 알림 아이콘에 숫자 1이 들어오기 때문이다. 그렇게 각각의 컴포넌트들은 각자 서버와 통신하여 UI까지 업데이트한다. 

페이스북의 알림 메뉴바

전체 페이지를 reload 할 필요가 없다는 것은 매우 편리하고 효율적이다. react 기반의 웹개발은 개발을 쉽게 해줄 뿐만 아니라 효율적인 면에서도 우수하다.