React 개발자를 위한 핵심 개념 총정리 🎯

오늘은 React 개발자가 꼭 알아야 할 핵심 개념들을 알아보겠습니다.

1. Component가 뭔가요? 🧩

레고 블록을 생각해보세요!

• 레고처럼 작은 부품들을 조립해서 큰 작품을 만드는 것
• UI를 재사용 가능한 조각으로 나누는 것이 바로 Component예요

// 함수형 컴포넌트 예시
function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

// 사용 예시
<Button text="클릭하세요" onClick={() => alert('안녕!')} />

2. Props와 State 🎭

Props (Properties)

마치 택배 배송처럼 작동합니다!

• 부모가 자식에게 전달하는 데이터
• 읽기 전용 (수정 불가)
• 컴포넌트의 "설정값"

// 부모 컴포넌트
function Parent() {
  return <Child name="React" />;
}

// 자식 컴포넌트
function Child({ name }) {
  return <h1>안녕, {name}!</h1>;
}

State

매장의 재고 관리 시스템처럼 작동합니다!

• 컴포넌트의 "내부 데이터"
• 변경 가능
• 변경되면 자동으로 리렌더링

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

3. Virtual DOM 🌳

실제 DOM을 다루는 게 아닌, 가상의 DOM을 먼저 만듭니다.

• 실제 변경사항을 한 번에 반영
• 성능 최적화의 핵심!

// React는 이런 변경사항을 모아서
<div>
  <h1>수정 전</h1>
</div>

// 한 번에 실제 DOM에 반영합니다
<div>
  <h1>수정 후</h1>
</div>

4. Hooks 🎣

낚시처럼 원하는 기능을 "훅" 걸어서 사용합니다!

useState

function NameInput() {
  const [name, setName] = useState("");

  return (
    <input 
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

useEffect

function UserProfile({ userId }) {
  useEffect(() => {
    // 컴포넌트가 마운트되거나 userId가 변경될 때 실행
    fetchUserData(userId);
  }, [userId]);

  return <div>프로필 정보...</div>;
}

5. 생명주기 (Lifecycle) 🌱

식물의 성장과정처럼 컴포넌트도 생명주기가 있습니다!

1. 탄생 (Mount)

   • 컴포넌트가 처음 나타날 때

2. 성장 (Update)

   • props나 state가 변경될 때

3. 소멸 (Unmount)

   • 컴포넌트가 사라질 때

function LifecycleDemo() {
  useEffect(() => {
    console.log("컴포넌트 탄생!");

    return () => {
      console.log("컴포넌트 소멸!");
    };
  }, []);

  return <div>라이프사이클 예시</div>;
}

주의할 점 ⚠️

1. 불변성 유지하기

   // ❌ 잘못된 방법
   const [users, setUsers] = useState([]);
   users.push(newUser);
   
   // ✅ 올바른 방법
   setUsers([...users, newUser]);

2. 무한 렌더링 조심

   // ❌ 무한 렌더링 발생
   const [count, setCount] = useState(0);
   setCount(count + 1); // 렌더링 시마다 실행됨!
   
   // ✅ useEffect 사용
   useEffect(() => {
     // 특정 조건에서만 실행
   }, [의존성배열]);

실전 팁 💡

1. 컴포넌트는 작게 유지

   • 한 컴포넌트에 한 가지 책임만
   • 재사용성 증가

2. 성능 최적화

   • React.memo로 불필요한 리렌더링 방지
   • useCallback, useMemo 적절히 사용

const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

마치며 🎁

React의 핵심 개념들을 이해하셨나요? 이제 실전 프로젝트에 적용해보세요!
처음엔 어려워 보여도, 하나씩 적용하다 보면 자연스러워질 거예요.

---

더 자세한 내용이 궁금하시다면 댓글로 남겨주세요! 😊