📖 TIL - React 마스터하기: 클로저부터 클래스네임까지

📌 학습 요약

오늘은 React의 고급 기능들을 깊이 있게 학습했습니다. 특히 클로저의 활용, 컴포넌트 중첩, 폼 제출 최적화, 그리고 클래스네임 관리 방법에 대해 집중적으로 공부했습니다.

🤔 주요 개념 및 구현 방법

1. 클로저와 함수 반환

잘못된 방식

function debounce(func, delay) {
  let timer;
  clearTimeout(timer);  // 즉시 실행되어 버림
  timer = setTimeout(() => func(), delay);
}

이 방식의 문제점:

• 함수가 한 번만 실행되고 끝남
• timer 변수가 함수 종료와 함께 사라짐
• debounce 효과를 얻을 수 없음

올바른 방식 (클로저 활용)

function debounce(func, delay) {
  let timer;  // 클로저로 유지되는 변수
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

장점:

• timer 변수가 클로저로 유지됨
• 여러 번 호출 가능
• 실제 debounce 효과 구현 가능

2. props.children을 통한 컴포넌트 중첩

기본 사용법

const ParentComponent = ({ children }) => {
  return (
    <div>
      <h1>Parent Title</h1>
      <div>{children}</div>
    </div>
  );
};

// 사용 예시
<ParentComponent>
  <ChildComponent />
</ParentComponent>

고급 활용법

const ParentComponent = ({ children }) => {
  // 자식 요소 조작
  React.Children.forEach(children, child => {
    console.log(child.type);
  });

  // 조건부 렌더링
  if (!Array.isArray(children)) {
    return <div>Single child: {children}</div>;
  }

  return (
    <div>
      {children.map((child, index) => (
        <div key={index}>{child}</div>
      ))}
    </div>
  );
};

3. Form 제출 이벤트 최적화

Before (개별 onClick 이벤트)

<form className={styles.formGrid}>
  <button 
    type="button"
    onClick={(e) => addNationHandler(e)} 
    className={styles.formButton}
  >
    국가 추가
  </button>
  <button 
    type="button"
    onClick={(e) => modifyNationHandler(e)} 
    className={styles.formButton}
  >
    업데이트
  </button>
</form>

After (통합 onSubmit 이벤트)

const handleSubmit = (e) => {
  e.preventDefault();
  const buttonName = e.nativeEvent.submitter.name;
  
  if (buttonName === 'add') {
    addNationHandler();
  } else if (buttonName === 'modify') {
    modifyNationHandler();
  }
};

<form className={styles.formGrid} onSubmit={handleSubmit}>
  <button type="submit" name="add" className={styles.formButton}>
    국가 추가
  </button>
  <button type="submit" name="modify" className={styles.formButton}>
    업데이트
  </button>
</form>

4. 클래스네임 관리 전략

1) Props 직접 전달 방식

const TableWrapper = ({ children, wrapperClassName, headerClassName }) => (
  <table className={wrapperClassName}>
    <thead className={headerClassName}>
      {children}
    </thead>
  </table>
);

2) classnames 라이브러리 활용

import classNames from 'classnames';

const TableWrapper = ({ 
  children, 
  wrapperClassName, 
  headerClassName, 
  isActive 
}) => {
  const tableClass = classNames(wrapperClassName, {
    'active-class': isActive,
    'table-wrapper': true
  });

  return (
    <table className={tableClass}>
      <thead className={headerClassName}>
        {children}
      </thead>
    </table>
  );
};

💡 실무 적용 시 주의사항

1. 클로저 사용 시

   • 메모리 누수 주의
   • 불필요한 클로저 생성 피하기
   • 클로저의 생명주기 고려

2. children 활용 시

   • 타입 체크 필수
   • key 속성 적절히 사용
   • 불필요한 중첩 피하기

3. 폼 제출 처리 시

   • preventDefault() 필수
   • 버튼의 name 속성 활용
   • 이벤트 버블링 고려

4. 클래스네임 관리 시

   • 프로젝트 규모에 따른 전략 선택
   • CSS 모듈과의 조합 고려
   • 성능 영향 검토

🎯 개선 및 발전 방향

• 클로저 패턴의 다양한 활용 방안 연구
• 컴포넌트 재사용성 향상 방법 고민
• 이벤트 핸들링 최적화 전략 수립
• CSS-in-JS 도입 검토