RARRIT

기억을 너무 믿지 말자

:ledger: 리엑트란(ReactJS) 무엇인지 알아보자!

자바스크립트 과정이 끝나고 시작된 리엑트 입문… 열심히 배워보며, 기록해보겠다!

:one: 리엑트(ReactJS)란?

리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용된다. 리액트는 컴포넌트 기반의 설계를 통해 복잡한 사용자 인터페이스를 효율적으로 관리하고, 단방향 데이터 흐름을 기반으로 하여 예측 가능한 애플리케이션을 만들 수 있게 도와줌.

:two: 리액트(ReactJS)의 주요 특징

:pushpin: 2-1) 컴포넌트 기반 아키텍처

  • 컴포넌트(Component)는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각이다.
  • 각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가질 수 있으며, 이들 컴포넌트를 조합해 전체 UI를 구성합니다.
  • 예시
    function func(props){
return <p>Hello, {props.world}</p>;
}

:pushpin: 2-2) 가상 DOM(Virtual DOM)

  • 리엑트는 가상 DOM을 사용하여 UI 업데이트를 효율적으로 처리함
  • 가상 DOM은 메모리 내에서 실재 DOM의 가벼운 복사본을 만들고, 상태 변화가 발생하면 새로운 가상 DOM과 이전 상태를 비교하여 최소한의 실제 DOM 업데이트를 수행함 jsx
  • 이를 통해 성능을 최적화하고, 빠른 UI 랜더링을 가능하게 함

:pushpin: 2-3) 단방향 데이터 흐름

  • 리엑트에서는 데이터가 부모 컴포너늩에서 자식 컴포넌트로 즉, 단방향으로 흐름
  • 이 구조는 데이터의 흐름을 예측 가능하게 하고, 디버깅을 쉽게 해줌
  • 상태(state)와 속성(props)을 통해 컴포넌트 간 데이터 전달이 이루어짐

:pushpin: 2-4) JSX

  • 리엑트는 JSX(JavaScript XML)*라는 문법을 사용함. JSX는 자바스크립트 내에서 HTML과 유사한 구조를 작성할 수 있게 해줌
  • JSX는 결국 자바스크립트로 변환되며, 가독성을 높이고 직관적인 UI 구성을 도와줌
  • 예시
    const HelloWorld = <p>Hello, World!</p>;

:pushpin: 2-5) 상태 관리

  • 리엑트에서는 컴포넌트의 상태(state)를 관리할 수 있음
  • 상태는 컴포넌트 내에서 변경될 수 있는 데이터를 의미하며, 상태가 변경되면 컴포넌트는 다시 랜더링 됨
  • 리엑트에서는 전역 상태 관리 라이브러리(Redux, MobX)와 함께 사용할 수 있음

:three: 리엑트의 장점

  • 재사용성
    • 컴포넌트 기반 구조 덕분에 코드를 재사용할 수 있어 개발 생산성을 높임
  • 성능 최적화
    • 가상 DOM과 효율적인 업데이트 알고리즘으로 빠른 랜더링을 지원함
  • 유연성
    • 다양한 자바스크립트 라이브러리와 결합해서 사용이 가능함, 또는 React Native를 활용한 모바일 애플리케이션에서도 활용이 가능하며 VR에서까지 활용할 수 있음
  • 커뮤니티
    • 정말 많은 사용자층과 활발한 커뮤니티 덕분에 다양한 리소스와 도구를 활용할 수 있음, npm에 등록된 패키지의 다운로드 수를 의미하는 npm trends에서 SPA 아키텍쳐 기술의 동향을 살펴 보면 react.js의 인기가 월등히 높음을 알 수 있음

:four: 리엑트의 단점

  • 습득 시간
    • JSX와 ES6등 문법과 개념을 익히는 데 시간이 필요함
  • 프로젝트 구조 관리
    • 대규모 프로젝트에서 상태 관리 및 컴포넌트 구조 관리가 복잡해질 수 있음
  • 의존성
    • 리엑트 자체는 UI 라이브러리지만, 완전한 애플리케이션 개발을 위해서는 추가 라이브러리(라우팅,상태 관리 등등)가 필요함

:five: 리엑트의 사용

  • 리엑트는 SPA(Single Page Application) 개발에 자주 사용됨
  • 대표적인 리엑트 기반 애플리케이션으로는 페이스북,인스타,넷플릭스 등이 있음

:six: 리엑트 생태계

  • React Router
    • 리엑트 애플리케이션에서의 라우팅을 관리하기 위한 라이브러리
  • Redux
    • 애플리케이션의 상태 관리를 도와주는 중앙 집중식 상태 관리 라이브러리
  • Next.js
    • 서버 사이드 랜더링(SSR)을 지원하는 리엑트 프레임워크
  • Create React App
    • 리엑트 프로젝트를 빠르게 시작할 수 있게 해주는 공식 툴

:fire: 마무리

리엑트는 현대 웹 애플리케이션 개발에서 정말 많은 사람들이 사용하고 있고 중요한 역할을 하고 있는 강력한 도구인 것 같다. 프론트엔드 개발을 준비하는 과정에서 리엑트에 대해 자세히 이해하고 잘 활용할 수 있도록 노력해야겠다.

태그:

카테고리: ,

업데이트:

참고