리액트를 통한 AI FrameWork 구현 내용 표시 - 리액트 소개

리액트는 사용자 인터페이스를 구축하기 위한 오픈 소스, JavaScript 라이브러리,

리액트의 주요 특징

컴포넌트 기반 구조

• UI 를 작은 컴포넌트 단위로 나누어 개발
• 컴포넌트는 재사용 가능, 독립적, 각기 자신의 상태와 로직을 가질 수 있음
• 모듈화된 코드

Virtual DOM

• 가상 DOM 을 사용하여 변경 사항을 효율적 관리
• 상태 변경 시 Virtual DOM 이 변경된 부분만 비교하고, 실제 DOM 에 필요한 업데이트만 반영, 이를 통해 성능 향상

단방향 데이터 흐름

• 데이터는 부모-자식 컴포넌트로 props 를 통해 전달
• 데이터 흐름 예측 가능, 디버깅 용이

 

리액트 시작

1. 환경 설정

• React 프로젝트를 시작하기 위해 Node.js, npm 이 필요

2. 기본 파일 구조

• src/ 디렉토리 내에서 작업 진행, 주요 파일
  • App.js : 애플리케이션의 메인 컴포넌트
  • index.js : ReactDOM 을 사용해 애플리케이션을 HTML 에 렌더링
  • public/index.html : 실제 DOM 에 해당하는 HTML 파일

3. 기본 컴포넌트 작성

• 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트를 사용한다.
• 기본형 컴포넌트 예시

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

4. 상태 관리

• 리액트에서 상태를 관리하려면, Hook 을 사용할 수 있다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

리액트 주요 개념, 기술

 

• Props
  • 컴포넌트 간 데이터를 전달할 때 사용합니다.
  • 읽기 전용이며 변경할 수 없습니다.
• State
  • 컴포넌트 내에서 데이터를 관리하는 방법입니다.
  • useState, useReducer 등 다양한 훅을 통해 상태를 제어합니다.
• Hooks
  • 함수형 컴포넌트에서 상태와 생명주기를 제어하기 위한 기능입니다.
  • 주요 훅:
    • useState: 상태 관리
    • useEffect: 생명주기 관리
    • useContext: 전역 상태 공유
• React Router
  • 페이지 이동과 같은 라우팅을 구현하는 라이브러리입니다.
  • 단일 페이지 애플리케이션에서도 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다.
• Redux
  • 복잡한 애플리케이션의 상태를 관리하기 위한 라이브러리입니다.
  • 전역 상태를 한 곳에서 관리하여 데이터 흐름을 명확히 할 수 있습니다.

 

리액트 활용 팁

• 컴포넌트 설계
  • 하나의 컴포넌트는 한 가지 역할만 수행하도록 설계합니다.
  • 컴포넌트가 너무 커지면 하위 컴포넌트로 분리합니다.
• 최적화
  • React.memo, useMemo, useCallback 등을 활용하여 성능을 최적화합니다.
  • 리스트 렌더링 시에는 고유한 key 속성을 설정합니다.
• 디버깅 도구
  • 브라우저에서 React Developer Tools를 설치하면 컴포넌트 구조와 상태를 확인할 수 있습니다.