[React] React 란? React 특징

React

• https://react.dev/

React

• The library for web and native user interfaces

 

React 란?

• 화면을 만들기 위한 자바스크립트 라이브러리
• 현재 프론트엔드 개발 환경에서 가장 많이 활용되고 있는 라이브러리
• 사용자와 상호 작용이 가능한 동적 UI 제작 가능

 

 

React의 특징

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

 

특징 1. Data Flow

• 양방향 X 단방향 O 데이터 흐름
• Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐 름을 추적하기 힘들고 복잡해지는 경향이 있다

특징 2. Component 기반 구조

• Component : 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적 인 하나의 부품으로 만드는 방법
• React는 UI(View)를 여러 Component를 쪼개서 만든다
• 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면 을 구성

1. Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽다.
2. 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
3. 코드를 반복할 필요 없이 Component만 import 해서 사용하면 된다 는 간편함이 있다.
4. 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이하다.

• Header, Footer 같은 구조를 컴포넌트로 제작
• 컴포넌트를 조합해 Root Component (최 상위 컴포넌트) 로 만듦

 

특징 3. Virtual DOM

• DOM : Document Object Model ( 문서 객체 모델 )
• React는 DOM Tree 구조와 같은 구조를 Virtual DOM 으로 가지고 있다.
• 이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그 릴 때 실제와 전후 상태를 계속 비교
   -> 앱의 효율성과 속도 개선

 

특징 4. Props and State

• Props
=> 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
=> 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능

• State
=> 컴포넌트 내부에서 선언되고 내부에서 값을 변경
=>  클래스형 컴포넌트에서만 사용 가능, 각각의 state는 독립적 (함수형 컴포넌트에서는 NO!

 

특징 5. JSX

• React 에서 JSX 사용이 필수는 아니지만 편의성을 위해 대부분의 프로 젝트에서 JSX를 사용
• JSX = Javascript + XML
• JavaScript를 확장한 문법으로 React Element를 생성