📍 React

React는 Facebook에서 만든 Javascript 사용자인터페이스(UI) 라이브러리이다.

필요성

• 자바스크립트 기반의 문법을 사용하기 때문에 보다 쉽게 사용 가능
• 필요한 부분에만 적용 가능
• 기존 프로젝트와 React의 쉬운 통합
• 다른 프레임워크나 라이브러리와의 혼용도 가능
• 다양한 라이브러리와 도구를 통한 높은 개발 생산성
• 웹뿐만 아니라 플랫폼에서도 활용 가능
  
  

특징

1. Virtual Dom
   Virtual DOM이란 가상의 Document Object Model을 말한다. Virtual DOM을 사용하여 UI 업데이트를 처리하기 때문에 최소한의 DOM 조작이 가능하여 신속한 UI 업데이트를 가능하게 하고, 성능을 최적화 시킨다.

2. Component-based Architecture
   React는 ‘component’ 기반 architecture를 채택하고 있다. 이는 특정 기능을 수행하는 독립적인 단위인 component를 조립하여 화면을 만들어 가는 구조를 의미한다. 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 component를 조합하여 복잡한 UI를 구성할 수 있다.
   component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉬우며 재사용성이 높다. 따라서 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점이 있다.

   Component
   독립적인 단위의 소프트웨어 모듈로, React에서 앱을 이루는 가장 작은 조각이다.

3. Data Flow
   React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가지며 단방향 데이터 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트한다.
   양방향 바인딩은 UI가 복잡해지면 성능이 저하되지만, 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜준다는 장점이 있다.

4. Props and State

   Props
   Props란 부모 component에서 자식 component로 전달해 주는 데이터를 말한다. 자식 component에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 component만 props를 변경할 수 있다.
   
   State
   State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.

5. JSX
   React는 JS와 XML을 조합한 JSX 문법을 사용하여 component의 구조와 동작을 선언적으로 작성할 수 있게 해준다. 이는 가독성을 높이고, component의 렌더링을 보다 직관적으로 이해할 수 있게 해준다.

   • JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
     
     
   • 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

🪄 마치면서

React를 사용하면서 js를 쓰기도 하고, jsx를 쓰기도 하기에 의아했었는데, jsx는 react를 사용하고 있다는 것을 암시하는 확장자명이란 것을 알고나니 너무 새로웠다. 이런 생각을 하다니 사람들은 참 똑똑한 것 같다..