React

 

React

 

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

JavaScript를 사용하여 웹사이트의 UI(User Interface)를 구성하는 라이브러리

→ 우리가 보는 버튼, 메뉴 등과 같은 요소를 쉽게 만들고 관리할 수 있도록 도와줌

 

페이스북에서 개발하여 오픈 소스로 공개됨

 

 

선언적 UI 라이브러리

 

선언적(Declarative) 프로그래밍 방식을 따름

→ "어떻게(How)" 동작하는지보다 "무엇(What)"을 해야 하는지에 집중

 

예:

특정 버튼을 클릭하면 화면이 어떻게 변해야 하는지를 선언적으로 작성하면, 내부적인 렌더링 과정은 React가 자동으로 처리함

→ 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있음

 

컴포넌트 기반 (Component-Based)

 

UI를 컴포넌트(Component) 단위로 구성

각 컴포넌트는 독립적인 기능을 가지며, 여러 번 재사용 가능

const MyComponent = () => {
  return <div>Hello, React!</div>;
};

함수형 컴포넌트(Functional Component)를 정의

→ 컴포넌트를 조합하여 복잡한 UI를 만듦

→ Bottom-up 방식의 개발 가능

 

빠른 렌더링 (Virtual DOM)

 

Virtual DOM(가상 DOM)을 사용하여 성능 최적화

• 변경 사항을 실제 DOM(Document Object Model)에 즉시 반영하는 대신, 먼저 가상의 DOM에서 연산을 수행
• 변경이 필요한 최소한의 요소만 실제 DOM에 반영하여 불필요한 렌더링 방지
• 결과적으로 화면 갱신이 빨라지고 성능 향상

 

활용 환경

 

• 웹 개발 : 기본적인 React 개발
• 서버 사이드 렌더링(SSR) : Next.js와 함께 사용
• 모바일 개발 : React Native를 이용한 앱 개발
• 3D 렌더링 : R3F(React Three Fiber)와 함께 사용 가능

→ React는 다양한 기술과 쉽게 결합할 수 있는 유연한 아키텍처

 

 

React

React