React란?
React는 싱글페이지 기반으로 동작하는 웹 프레임워크로, 사용자 인터페이스를 만들기 위해 사용되는 자바스크립트 라이브러리의 하나.
- React는 Facebook (현 Meta) 에서 유지보수를 함
- 모바일 애플리케이션 개발에도 사용할 수 있음
- 라우팅, API 통신 등을 기본적으로 제공하지 않음 (사용하기 위해선 npm install)
특징 5가지
1.Data Flow가 단방향입니다. - 데이터가 어떻게 사용되고 수정되는지를 쉽게 알 수 있습니다.
2. Component 기반 구조입니다. - 재사용성이 높고 유지보수가 쉽습니다
3. Virtual DOM 을 사용합니다 - 바로 브라우저에 적용하지 않고 실제 DOM과의 차이를 찾은 후 diff만 적용하기 때문에 빠릅니다.
4. Props와 state - Props는 상위 컴포넌트에서 받은 변수이고 state는 컴포넌트 내부선언입니다. Props는 수정이 불가능 하지만 State는 수정이 가능하고 동적 데이터를 다룰때 사용합니다.
5. JSX 사용 - 사용자 임의로 Tag를 만들 수 있어서 확장성이 좋습니다.
특징 - 상세설명
1. Data Flow가 단방향
Data flow란?
시스템 내에서 한 장소에서 다른 장소로 또는 시스템 간의 데이터 이동을 의미
Data Flow가 단방향으로 움직이기 때문에 명확하고 체계적인 구조를 적용하는데 도움이 되고, 데이터가 어떻게 사용되고 수정되는지를 쉽게 추론할 수 있음 (Angular.js 는 양방향)
--> React는 기본적으로 상위 컴포넌트에서 하위 컴포넌트로만 데이터의 이동이 가능하다
--> 하위에서 상위로 보내기 위해선 특정한 call back 기능을 통해서 보내야함
2. Component 기반 구조
Component란 독립적인 단위의 소프트웨어 모듈
React는 UI (view)를 각각의 Component로 쪼개서 만듦
이런 component 들을 조립하여 하나의 페이지를 구성함
Component 단위로 나눠져있어서 좋은 점
- 전체 코드 파악이 상대적으로 쉬움
- 재사용성이 높음 (import 해서 불러오면 됨)
- 유지보수, 관리가 용이해짐
3. Virtual DOM
Virtual Document Object Model의 약자
DOM 이란?
Document Object Model의 약자
HTML과 XML 문서를 위한 프로그래밍 인터페이스
문서의 구조를 노드의 트리 구조로 표현
각 노드는 요소, 속성 또는 텍스트 콘텐츠를 나타냄
프로그램과 스크립트가 문서의 내용, 구조 및 스타일에 동적으로 접근하고 수정할 수 있도록 해줌
DOM은 HTML과는 다르다
HTML --> Browser --> DOM (기능을 수행할 객체들로 실체화된 형태)
DOM은 JS, python(beautiful soup) 등으로 조작을 할 수 있음 (API가 정해져있음)
MDN 문서 정의 : HTML이나 XML 문서를 실체로 나타내는 API
- ref : 출처 : solimii.log
virtual Dom이란? DOM의 구조만 간결히 흉내낸 자바스크립트의 객체
실제 DOM을 조작하지 않고 virtual DOM을 사용하여 미리 변화를 만들어 놓고 이를 실제 DOM과 비교 (Diffing) 한 후 최적의 알고리즘을 찾아 적용함
브라우저 단에서 먼저 적용 후 실제 DOM에 적용하게됨
4. Props and State
- props : 부모 컴포넌트가 자식 컴포넌트로 전달해주는 데이터 - 자식 component는 수정 불가
- state : 컴포넌트 내부에서 선언 - 동적인 데이터를 다룰 때 사용
5. JSX
- Javascript XML의 줄임말 (eXtensible Markup Language == XML)
- 컴포넌트에서 HTML과 같은 UI 요소를 JS 안에서 작성할 수 있게 하는 확장 문법
- HTML과 가장 큰 차이 : 사용자 임의로 Tag를 만들 수 있음
Javascript를 확장한 문법입니다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React 공식문서
- ref : 출처 : jini_eun.log
