리액트 #

• 메타에서 개발된 사용자 인터페이스를 만들기 위한 오픈소스 자바스크립트 라이브러리.
• 프레임워크가 아닌 라이브러리로써 프로그램 흐름에 대해 제어하지 않고
  개발자가 필요한 부분만 필요할 때 가져다 사용. (제어 권한이 개발자에게 있음)
• SPA (Single Page Application) 방식으로 동작.

SPA #

• 하나의 페이지를 로드 후 내부 내용은 동적으로 번갈아 가며 렌더링하는 방식.
• 첫 로드 시 웹 애플리케이션에 필요한 모든 리소스를 한 번에 로드하기 때문에
  새 페이지 요청 시 해당 페이지 갱신에 필요한 데이터만 전달받아 트래픽 감소에 효과적.
• URL 라우팅을 사용하여 여러 화면과의 전환을 관리함, 특정 URL 경로에 대한
  데이터를 동적으로 적용함.
• 대표적으로 React, Angular, Vue.js 등의 프론트엔드 프레임워크를 사용해 SPA 개발을 진행.

리액트 장점 #

• 컴포넌트 기반의 아키텍처로 구성되어 있어 코드의 재사용성, 유지보수성이 높음.
• 단방향 데이터 흐름을 가지기 때문에, 데이터 전달 시 결과 예측이 쉬우며 디버깅에 용이.
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 컴포넌트 간 상호작용이 원활함.
• 타 라이브러리와 높은 호환성을 가짐.
• 가상 DOM (Virtual DOM)을 사용하여 UI 업데이트 시 성능을 최적화.
• 프론트엔드 분야 프레임워크 점유율에서 상당한 부분을 차지함.

Virtual DOM #

• 브라우저와 실제 DOM(Document Object Model) 사이에 존재하는 가상 DOM.
• 메모리에 적재되어 엘리먼트가 변경되는 시점을 캐치한 후, 이를 실제 DOM에 반영하여
  리렌더링 최소화.

리액트 단점 #

• 방대한 학습량, 생소한 문법, 다양한 hook을 익혀야 하기에 진입장벽이 높음.
• 다수의 컴포넌트와 이에 따른 상태관리, 데이터 흐름 등에 대한 복잡도가 높음.

JSX (JavaScript XML) #

• 리액트 환경에서 엘리먼트를 생성하여 UI를 표현하기 위해 작성되는 JavaScript의 확장 문법.
• HTML과 JavaScript 코드를 혼합하여 사용.
• 반드시 최상위 태그가 존재하여야 함.
• 모든 태그는 반드시 닫힘 태그가 있어야 함.
• 태그에 class 부여 시 className으로 부여해야 함 ('class'는 JavaScript에서 예약어이기 때문)
• 문자열 표현 시에는 "", 데이터 표현 시에는 {} 사용.
• 리액트는 {null}, {undefined}, {false} 의 값은 렌더링 되지 않음

• JSX는 Babel에 의해 일반적인 JavaScript로 변환되어 실행됨.
  

  const Component = () => {
      const name = "홍길동";
      return (
      <div>
        my name is {name}
      </div>
    )
  }
  

Component #

• 독립적인 단위를 가지는 모듈.
• 리액트에서는 UI를 구성할 때 여러 컴포넌트를 조립하듯이 구성할 수 있음.

• 컴포넌트 생성 후 export 하면 타 컴포넌트에서 import 해서 재사용 및 커스텀 할 수 있기에
  유지보수에 용이.

  const ParentComponent = () => {
      const parentName = "parent";
      return (
          <div>
              <ChildComponent name={parentName}/>
          </div>
      )
  }
  
  const ChildComponent = (props) => {
      const childName = "child";
      return (
          <div>
              <p>child name: {childName}</p>
              <p>parent name: {props.name}</p>
          </div>
      )
  }
  
  export default ParentComponent;
  

props (properties) #

• 부모 컴포넌트에서 자식 컴포넌트로 전달되는 객체 데이터.
• props 객체는 읽기 전용 데이터이므로 컴포넌트 내에서 수정할 수 없음.

Reference #

https://ko.legacy.reactjs.org/