-
React란?프로젝트/react 부시기 2023. 12. 10. 00:01728x90
React란?
react 로고 React.js 또는 ReactJS라고도 알려진 React는 웹 애플리케이션용 사용자 인터페이스(UI) 또는 사용자 인터페이스 구성 요소를 구축하기 위한 오픈 소스 JavaScript 라이브러리입니다.
Facebook에서 개발하고 오픈소스화 하여 대화형 및 동적 웹 애플리케이션을 만드는 데 널리 사용됩니다.
대규모의 활발한 개발자 커뮤니티를 가지고 있습니다.
React의 등장배경
웹기술의 발전 (https://hymndev.tistory.com/45) react를 사용하지 않더라도 html, css, javascript를 활용하여 DOM을 조작하여 콘텐츠를 변경하거나 사용자 작업에 응답할 수 있습니다.
하지만 Javascript를 활용하여 복잡한 UI를 관리하고 브라우저 간 호환성 문제를 처리하는 것이 점점 더 어려워지고 오류가 발생하기 쉽기 때문에 이 접근 방식에는 한계가 있었습니다.
이런 불편함으로 jQuery가 등장하게 됩니다.
jQuery는 JavaScript의 라이브러리로 DOM 조작 및 이벤트 처리를 단순화하도록 설계되었습니다.
브라우저 간 불일치를 추상화하고 요소 선택, 콘텐츠 애니메이션, AJAX 요청 처리와 같은 일반적인 작업을 더 쉽게 수행할 수 있게 되었습니다.
하지만 여전히 UI 상태를 관리하고 데이터 변경 사항을 처리하는 것은 여전히 어려운 일이었습니다.
이로 인해 React와 같은 최신 JavaScript 프레임워크가 등장하게 되었습니다.
React는 Facebook의 소프트웨어 엔지니어인 Jordan Walke가 개발하였습니다.
초기 목표는 전체 페이지를 다시 렌더링 하지 않고도 데이터 변경에 따라 사용자 인터페이스의 일부를 효율적으로 업데이트할 수 있는 라이브러리를 만드는 것이었습니다.
DOM이란 무엇인가?
DOM은 트리구조 (https://blog.10pines.com/2018/08/27/reactjs-virtual-dom/) DOM은 Document Object Model의 약자입니다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.
예를 들어 <html> <body> <title>과 같은 요소를 나타내는 노드가 존재하며 Javascript를 사용하여 DOM에 액세스 하고 조작할 수 있습니다.
react를 활용하는 경우에는 이벤트가 발생할 때 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 전후 상태를 비교하여 최소한의 변경 사항을 실제 DOM에 반영하는 방법으로 앱의 효율성과 속도를 개선합니다.
React의 특징 - 단방향 데이터 흐름
뷰와 앵글류는 양방향 데이터 바인딩을 하지만, UI가 복잡해지면 성능이 저하될 가능성이 있기 때문에 react는 단방향 바인딩을 활용합니다.
React의 특징 - 선언형
절차적인 접근 방식
const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = []; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { evenNumbers.push(numbers[i]); } } console.log(evenNumbers); // Output: [2, 4, 6]선언적 접근 방식
const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter((number) => number % 2 === 0); console.log(evenNumbers); // Output: [2, 4, 6]선언형이란 함수형 프로그래밍과 유사한 느낌으로 이해했습니다.
React의 특징 - 컴포넌트 기반
특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용하여 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어가는 구조입니다.
컴포넌트 단위로 쪼개져 있어 전체 코드를 파악하기 상대적으로 쉬우며, 재사용성이 높습니다.
React Native
웹이 아닌 플랫폼에서 활용할 수도 있습니다.
안드로이드 또는 아이폰의 모바일 앱을 만들 수도 있습니다.
참고자료
https://ko.legacy.reactjs.org/
https://www.elancer.co.kr/blog/view?seq=167
https://hymndev.tistory.com/45
https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
'프로젝트 > react 부시기' 카테고리의 다른 글
React vs VueJS vs Angular 비교해보기 (0) 2023.12.07 백엔드 개발자의 React 공부 시작 (0) 2023.12.05