why React

UI 개발의 효율성을 높이고, 유지보수와 성능을 최적화 할 수 있기 때문

 

특히

1. 컴포넌트 기반 아키텍쳐
   • 컴포넌트 : UI를 구성하는 독립적이고 재사용 가능한 코드의 조각
   • 함수형 컴포넌트 (Functional Component)
     
     • JS 함수로 작성되는 컴포넌트로, return문을 통해 JSX를 반환
     • useState, useEffect와 같은 React Hook을 사용해 상태와 생명주기를 관리
   • 클래스형 컴포넌트 (Class Component)
     • ES6 클래스 문법으로 작성, render 메서드를 통해 JSX를 반환
     • this.state를 사용해 상태를 관리, componentDidMount, componentWillUnmount 같은
       생명주기 메서드를 통해 특정 시점에 로직을 수행할 수 있다
   • 재사용성 : 중복을 줄이고, 유사한 기능을 여러 곳에서 재사용할 수 있다
   • 주요 구성 요소
     1. JSX (JavaScript XML)
        • JSX 문법을 사용해 HTML과 유사한 코드로 UI 구성
        • JSX는 JavaScript 내에서 HTML 태그를 작성할 수 있는 문법,
          브라우저가 이해할 수 있도록 JavaScript로 변환됨\
     2. Props (Properties)
        • 컴포넌트가 부모로부터 전달받는 데이터, 컴포넌트를 구성하는 외부 입력값
        • 읽기 전용 속성, 자식 컴포넌트에서는 변경x, 부모컴포넌트에서만 변경가능
     3. State (상태)
        • 컴포넌트 내에서 관리되는 데이터로, 내부 데이터이기 때문에 
          컴포넌트의 동작에 따라 변경될 수 있음.
        • State가 변경되면 컴포넌트는 다시 렌더링됨
     4. 생명주기 (Lifcycle)
        • 함수형 컴포넌트에서는 useEffect Hool을 통해 생명주기를 관리하고,
          클래스형 컴포넌트에서는 생명주기 메서드를 사용
2. 가상 DOM (Virtual DOM)
   • DOM (Document Object Mode)의 가상 표현으로,
     React가 DOM 조작을 최적화하기 위해 메모리에서 관리하는 객체.
   • 가상 DOM의 작동 원리
     
     1. 가상 DOM에서 상태 변경
        컴포넌트의 상태나 props가 변경되면 React는 새로운 가상 DOM트리 생성.
        이때, 컴포넌트에 대한 변경 사항을 메모리 상의 가상 DOM에 반영
     2. 변경 사항 비교 (Diffing)
        새 가상 DOM 트리와 이전 가상 DOM 트리 비교하여, 변경된 부분 찾는다.
        diffing 알고즘을 통해 수행, 변경 사항을 빠르게 감지하기 위해
        최적화된 비교 방식을 사용
     3. 실제 DOM 업데이트 (Reconciliation)
        실제 DOM에 필요한 변경 사항만 최소한으로 반영.
        이 과정은 재조립이라 불리며, 가상 DOM과 실제 DOM간의 불일치 부분을 찾아
        업데이트하는 작업. 이로 인해 전체 DOM을 다시 렌더링하지 않고도
        필요한 부분만 효율적으로 업데이트할 수 있다.
   • 빠른 업데이트 : 변경 사항이 생기면 이를 메모리 상의 가상 DOM에서 먼저 계산한 뒤
     실제 DOM에 반영함. 직접 DOM을 조작하는 것보다 빠르고 효율적
   • 최소화된 렌더링 : 실제 DOM과 비교하여 변경된 부분만 업데이트하기 때문에
     불필요한 렌더링을 줄여줌. 데이터가 자주 변경되는 대규모 앱에서 성능 최적화에 도움
3. 단방향 데이터 흐름 (One-way Data Flow)
   • React는 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있는 당방향 흐름 제공
     이러한 흐름은 앱의 상태를 예측 가능하고 관리하기 쉽게 만들어줌.
   • 상태가 변경되면 데이터 흐름을 따라 UI가 일관성 있게 업데이트되어,
     복잡한 상태 관리가 필요한 애규모 앱에서도 유지보수가 용이함.
4. 상태 관리와 React 생명주기 관리
   • 상태 관리 : useState, useReducer 같은 Hook을 사용하여 컴포넌트 내에서 상태관리 쉬움
     또한 Redux나 Context API와 같은 도구를 활용해 전역 상태를 관리할 수 있음
   • 생명주기 관리 : React의 생명주기 메서드나 useEffect Hook을 통해 컴포넌트가 
     마운트되거나 언마운트될 때 특정 작업을 쉽게 실행할 수 있어, API 호출이나 
     데이터 로딩 같은 작업을 효과적으로 처리할 수 있다.
5. 유연성과 확장성
   • 다양한 라이브러리와 결합하여 필요한 기능을 확장할 수 있는 유연한 구조.
     라우팅 : react-router,
     상태 관리 : Redux나 MobX,
     스타일링 : styled-components
   • 다양한 플랫폼에 적용할 수 있다. 웹 뿐 아니라 모바일 앱을 위한
     React Native를 통해 크로스 플랫폼 앱 개발도 가능.
6. 활발한 생태계와 커뮤니티
   • Facebook이 주도하는 오픈소스 프로젝트로 시작된 React는 현재 가장 인기있는 JS라이브러리.
   • 학습 자료와 문제 해결 사례를 쉽게 찾을 수 있고, 필요 기능이나 최신 기술 트렌드를 빠르게 접함