React 란??

React에 대해서 알아보았습니다.

리엑트는 프론트엔드의 앱페이지를 개발하기위해서 빠르고 편하게 만들어 줄 수 있도록 하는 자바스크립트의 라이브러리 입니다.

React의 구조는 컴포넌트 기반으로 설계되어 있으며, 이는 재사용성과 유지보수성을 높이는 데 큰 역할을 합니다. React 애플리케이션은 여러 개의 컴포넌트로 구성되며, 각 컴포넌트는 UI의 일부분을 담당합니다.

컴포넌트

React의 기본 단위인 컴포넌트는 UI의 일부를 정의하는 JavaScript 함수 또는 클래스입니다.

종류: 두 가지 주요 타입이 있습니다

함수형 컴포넌트: 상태와 생명주기 메서드를 사용할 수 있는 Hooks가 추가된 함수입니다.

function MyComponent() {
  return <div>Hello, World!</div>;
}

클래스형 컴포넌트: 클래스 구문을 사용하여 정의된 컴포넌트로, 상태와 생명주기 메서드를 가질 수 있습니다.

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

 

JSX (JavaScript XML)

JSX는 JavaScript 코드 내에서 HTML처럼 보이는 구문을 사용할 수 있게 해주는 문법입니다. 이를 통해 컴포넌트의 UI 구조를 직관적으로 작성할 수 있습니다.

예시

const element = <h1>Hello, World!</h1>;

보면 자바스크립트와 html의 문법이 함께 사용되는 것으로 보입니다.

 

Props

Props는 컴포넌트 간의 데이터 전달을 위한 방법입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

예시

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Park" />;
}

간단하게 생각을 해보면 우리가 함수를 호출할 때에 인자를 함께 보내는 것이라고 생각하면 편하다.

State

State는 컴포넌트의 내부 상태를 관리하는 방법입니다. 컴포넌트의 상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트가 다시 렌더링됩니다.

예시

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

라이프사이클 메서드

클래스형 컴포넌트에서 사용되는 메서드로, 컴포넌트의 생성, 업데이트 및 제거와 관련된 작업을 수행할 수 있습니다. 함수형 컴포넌트에서는 Hooks를 사용하여 생명주기를 관리합니다.

예시

componentDidMount() {
  // 컴포넌트가 마운트된 후 실행되는 코드
}