상세 컨텐츠

본문 제목

React란? (1)

Front-End/React

by devloper-jun 2023. 11. 30. 16:48

본문

1.  ReactJS는  정확히 무엇이고 왜 사용해야 할까?

 사용자 interfaces 구축을 위한 JS library. 클라이언트 측 JS로 방문자의 브라우저에서 실행되는 JS 코드로 로딩된 이후의 웹페이지를 조작할 수 있다. 그러면 웹사이트에서 다양한 상호 작용을 할 수 있는 사용자 인터페이스를 구축할 수 있어. 예를 들어 Netfilx가 있어 새로고침 버튼을 사용할 필요가 없으니 새 HTML 페이지를 생성하도록 기다릴 필요가 없어. 그 이유는 JS 덕분으로 우리가 작업하는 동안 해당화면에 보이는 내용인 DOM을 업데이트 해주거든. 그리고 모바일 앱에서 볼 수 있듯 UI를 통해서 훌륭한 사용자 경험을 제공해.

 

 기존에는 JS에서 명령형 접근 방식으로 element를 생성하고 해당 element에 이벤트를 등록했어. 그래서 data를 fetch 하거나 등록된 이벤트가 복잡해지며 소스 또한 복잡해지며 점점 한계를 가지게 된다. 그리고 동일한 코드를 생성하게 되며 반복적인 작업을 계속하게 됨.

React에서는 컴포넌트를 기반으로 컴포넌트가 각각 명확한 작업을 맡음으로 코드 유지 및 관리가 간편해짐.

 

 따라서 다양하며 복잡한 사용자 인터페이스를 쉽게 구축하고 선언형 컴포넌트에 중점을 둔 선언형 방식으로 코드를 작성할 수 있게 된다.

화면에 표시될 최종적인 목표를 정의하고 커스텀 HTML Element를 만들면 나머지는 React에서 처리를 해줌.

예를들어, 동일한 컴포넌트에서 표시해야 할 문구가 한 가지 이상이라면 컴포넌트를 한개만 더  만들면 된다. 해당하는 element에 필요한 function도 분리되어 작동된다.  이게 React를 사용하는 이유. 

 

- 리액트를 시작하기에 앞서, javascript의 함수라는 기초를 잘 다져둔다면 리액트 뿐만 아니라 자바스크립트를 기반으로 하는 언어에 대한 생태계를 이해하는데 많은 도움이 됨

2024.04.07 - [Front-End/Javascript] - 함수

 

공식홈페이지: https://react.dev/

 

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati

react.dev

 

관련글 더보기