오늘의 TIL: React 시작하기

오늘부터 React 공부를 시작했습니다. React는 프론트엔드 개발의 기초이자 정체성으로, 프론트엔드 개발자를 목표로 한다면 꼭 마스터해야 하는 기술 중 하나입니다. React는 JavaScript를 기반으로 만들어졌기 때문에, JavaScript와 밀접한 연관이 있으며, 이를 기반으로 공부를 진행하고 있습니다.

SPA (Single Page Application)

오늘은 먼저 SPA에 대해 배웠습니다. SPA는 Single Page Application의 약자로, 하나의 HTML 파일을 사용하여 JavaScript를 적극적으로 활용해 HTML을 동적으로 렌더링하는 기법입니다. 이 방식은 페이지 전환 없이도 사용자와의 상호작용을 통해 콘텐츠를 동적으로 업데이트할 수 있게 해줍니다.

JSX

React에서는 JSX라는 문법을 사용합니다. JSX는 JavaScript XML의 약자로, JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있게 해줍니다. 이를 통해 동적 렌더링을 쉽게 구현할 수 있습니다. 예를 들어, JSX를 사용하면 HTML 요소를 JavaScript 코드 안에서 직접 작성할 수 있으며, 이를 통해 동적으로 UI를 생성할 수 있습니다.

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

컴포넌트와 Props

React는 컴포넌트(Component) 기반의 구조를 가지고 있습니다. 컴포넌트는 UI를 구성하는 독립적인 블록으로, 각 컴포넌트는 특정 기능을 담당합니다. 이렇게 컴포넌트별로 기능을 나누어 개발한 후, import와 export를 통해 여러 컴포넌트를 조합하여 하나의 애플리케이션을 완성합니다.

함수형 컴포넌트(Functional Component)

• JavaScript 함수로 작성된 컴포넌트입니다.
• 간단하고 가볍게 사용할 수 있으며, React Hooks를 통해 상태 관리도 가능합니다.

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

Props

• Props(Properties) 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.
• Props는 읽기 전용(read-only)으로, 자식 컴포넌트는 부모로부터 받은 props를 사용하여 UI를 렌더링합니다.
• Props를 통해 컴포넌트를 재사용 가능하고 유연하게 만들 수 있습니다.

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

State

React에서 state는 컴포넌트의 상태를 관리하는 데 사용됩니다. state는 컴포넌트 내에서 동적으로 변화하는 데이터를 다룰 때 필수적인 개념입니다.

state의 특징

1. 불변성(Immutability)

   • React는 state의 불변성을 중요시합니다. 즉, state를 직접 수정하는 대신 새로운 값을 생성하여 state를 업데이트합니다.
   • 이는 React가 상태 변화를 효율적으로 감지하고, 필요한 부분만 다시 렌더링할 수 있도록 돕습니다.

2. useState Hook

   • 함수형 컴포넌트에서 state를 사용하기 위해 useState Hook을 제공합니다.
   • useState는 현재 상태와 상태를 업데이트하는 함수를 반환합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

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

state 사용 시 주의사항

• state는 비동기적으로 업데이트될 수 있으므로, 이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용하는 것이 좋습니다.

setCount(prevCount => prevCount + 1);

• state는 컴포넌트 내부에서만 관리되며, 다른 컴포넌트와 공유하려면 props로 전달해야 합니다.

  마무리

오늘은 React의 기본 개념인 SPA, JSX, 컴포넌트, props, state에 대해 배웠습니다. React는 컴포넌트 기반의 구조와 불변성을 중요시하는 특징을 가지고 있어, 프론트엔드 개발에서 강력한 도구로 자리 잡고 있습니다. 앞으로 더 깊이 있는 공부를 통해 React를 마스터해 나가겠습니다.