리액트 기초 01 - 핵심 요소 2 : 함수형 컴포넌트

컴포넌트란?

🧩 컴포넌트 (Component) 란?

---

컴포넌트는 클래스형과 함수형 2가지가 존재하지만 React 16.8 버전에서 2019년 2월에 React Hooks가 공식 도입되면서 기존의 클래스형 컴포넌트는 레거시 코드(오래된 시스템이나 기술로 작성되어 기존 소프트현재 기술 표준이나 개발 방식과 맞지 않는 코드)가 되어 함수형 컴포넌트가 주류가 되었다.

기본적인 함수형 컴포넌트의 구조

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

1. 함수 선언부

function App() {
  // 컴포넌트 로직
}

2. state 선언부

const [count, setCount] = useState(0);
// count: 상태 값
// setCount: 상태 변경 함수
// useState(0): 초기값 0으로 상태 생성

• React Hook 중 하나
• 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 기능

3. return문과 JSX

return (
  // JSX 코드
  // 화면에 표시될 내용
);

4.실제 사용 예시

import { useState } from 'react';

function App() {
  // 여러 개의 state를 선언할 수 있음
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 이벤트 핸들러나 다른 함수들
  const handleClick = () => {
    setCount(count + 1);
  };

  // JSX 반환
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>증가</button>
      
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default App;

이 구조의 장점

• 명확한 코드 구조
• 상태 관리가 용이
• 컴포넌트 로직과 UI의 명확한 구분
• 재사용성이 높음

Hook 과 state란 무엇인가?

함수형 컴포넌트의 가장 중요한 요소는 훅(Hooks)이다. usestate는 그런 훅의 일종이다.

1. Hook이란?

• React 16.8에서 도입된 기능
• 함수형 컴포넌트에서 상태관리와 생명주기 기능을 사용가능하게 해주는 함수
• 이전에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용 가능

2. useState란?

• React Hook 중 하나
• 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 기능
• 상태가 변경되면 자동으로 화면을 다시 렌더링
• 함수형 컴포넌트에서 가변적인 상태를 지정할 수 있음

3. 상태(State)란?

• 컴포넌트 내부에서 관리되는 데이터
• 변경 가능한 값
• 값이 변경되면 자동으로 화면 갱신
• 컴포넌트가 리렌더링되어도 유지되는 정보

4. useState의 구조

const [state, setState] = useState(initialValue);

• state: 현재 상태값
• setState: 상태를 변경하는 함수
• initialValue: 초기 상태값

5. 상태 관리의 특징

• 불변성 유지
• 비동기적 처리
• 렌더링 사이클과 연결
• 컴포넌트 별로 독립적