[REACT 이론] [01] 시작

REACT

 

• 컴포넌트 기반의 라이브러리
• React 애플리케이션은 작고 재사용 가능한 컴포넌트로 구성
• Virtual DOM을 사용하여 UI를 관리하고 업데이트

 

컴포넌트는 UI를 구성하는 요소로, 사용자 인터페이스의 여러 부분을 담당할 수 있습니다.

예를 들어, 버튼, 입력 폼, 헤더, 사이드바, 그리드 등이 모두 React 컴포넌트로 만들어질 수 있습니다.

 

React 애플리케이션을 개발할 때, 이러한 작고 독립적인 컴포넌트를 만들고 조합하여 전체 UI를 구성

▶ 코드의 재사용성과 유지보수성을 향상시키며, 대규모 애플리케이션의 더 쉽게 개발 가능

 

성능을 최적화하고 DOM 조작 작업을 효율적으로 처리할 수 있습니다.

컴포넌트 기반 아키텍처와 Virtual DOM을 결합하여 React는 빠르고 유연한 웹 애플리케이션 개발을 가능

 

 

 

 

 

✅ 프로젝트 생성 방법

1. npx create-react-app [프로젝트이름] 명령어를 입력하면 react 프로젝트가 생성

npx create-react-app test-app

 

 

 

src 폴더에 있는 index.js 파일

// index.js
ReactDOM.render(
    <React.StrictMode>
    	<App/>
    </React.StrictMode>
    document.getElemnetById(‘root’)
);

 

코드 설명)

• React.StrictMode
  애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로,
  Fragment와 같이 UI를 렌더링하지 않으며, 자식들에 대한 부가적인 검사와 경고를 활성화 하는 도구
  
  
• document.getElemnetById('root')
  id가 root인 요소, 즉 public폴더의 index.html 파일 내의 <div id=”root”>에 렌더링을 한다는 의미

 

 

2. App.js 파일을 열어보면 React 로고를 띄우는 코드 지우고 코드 입력

// App.js
import React, { Component } from 'react';

class App extends Component {
  // render 메서드: 컴포넌트가 화면에 어떻게 렌더링될지 정의
  render() {
    return ( <h1>Hello World!</h1> );
  }
}

// App 컴포넌트를 외부에서 사용할 수 있도록 내보냄
export default App;

 

 

 

3. 터미널에서 npm run start를 입력할 경우

npm run start

 

페이지에 Hello World! 문구 출력

 

 

 

 

 

 

✅ JSX

 

• JavaScript 코드 안에서 XML 형식으로 작성된 문법
• React 컴포넌트의 UI를 작성하는 데 사용

JSX 안에서는 중괄호({})를 사용하여 JavaScript 표현식을 포함

 

 

 

ex)

// jsx
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <p>This is a React component.</p>
      </div>
    );
  }
}

export default MyComponent;