리액트와 컴포넌트

리액트

자바스크립트를 통해 웹어플리케이션을 간편하게 만들고, 관리 할 수 있게 해주는 라이브러리입니다다. 리액트는 컴포넌트로 구성되어있고 각 컴포넌트는 state와props를 가집니다.

jsx문법

리액트의 JSX 문법은 JavaScript XML의 줄임말로, JavaScript 안에서 HTML과 유사한 구문을 사용할 수 있게 해줍니다. 이를 통해 개발자가 UI 구조를 직관적으로 작성할 수 있습니다.

import React from 'react';

function App() {
  const name = '리액트';

  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>리액트를 시작해 보세요.</p>
    </div>
  );
}

export default App;

컴포넌트

컴포넌트는 리액트를 이루는 기본 구성 단위입니다. UI를 독립적이고 재사용 가능한 조각들로 나누어 관리할 수 있게 합니다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.
컴포넌트는 대문자로 시작해야 합니다.

컴포넌트 사용

리액트에서 함수형 컴포넌트 Welcome를 선언하고 App 컴포넌트에서 사용하는 방법입니다

import React from 'react';

function Welcome() { // Welcome 컴포넌트
  return <h1>Hello!</h1>;
}

function App() {
  return (
    <div>
      <Welcome /> // Welcome 컴포넌트 사용
    </div>
  );
}

export default App;

마치며

리액트는 컴포넌트 기반의 구조를 통해 개발자가 UI를 쉽게 이해하고 유지 보수할 수 있습니다.