본문으로 건너뛰기
Advertisement

React: 핵심 개념과 훅(Hooks) (Step 2)

1. 컴포넌트와 JSX​

리액트 컴포넌트는 UI를 정의하는 JavaScript 함수입니다. JSX 를 통해 HTML과 유사한 구문을 사용하여 구조를 표현합니다.

// 함수형 컴포넌트 예시
const Welcome = ({ name }) => {
  return (
    <div className="card">
      <h1>안녕하세요, {name}님!</h1>
      <p>리액트의 세계에 오신 것을 환영합니다.</p>
    </div>
  );
};

2. State (상태 관리)​

컴포넌트 내부에서 시간이 지남에 따라 변하는 데이터를 다룰 때 useState 훅을 사용합니다.

import { useState } from 'react';

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

  return (
    <div>
      <p>현재 클릭 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

3. Props (속성 전달)​

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 통로입니다.

  • 중요: Props는 자식 쪽에서 수정할 수 없습니다 (Read-only).

4. Effect (부작용 처리)​

데이터 페칭, 구독 설정, DOM 수동 수정과 같은 부수적인 로직을 처리할 때 useEffect를 사용합니다.

useEffect(() => {
  console.log("컴포넌트가 렌더링될 때마다 실행됩니다.");
}, [count]); // 의존성 배열인 count가 변경될 때마다 실행
Advertisement
Advertisement