[멋쟁이 사자처럼 프론트엔드 스쿨] 71일차 TIL - 명령형 핸들, Effect

🍰 오늘도 아자자자!

🍴 명령형 핸들(Imperative Handle)

: 함수형 컴포넌트에서 클래스 컴포넌트의 ref와 유사한 기능을 제공하는 개념.

1. forwardRef와 함께 사용 - 부모로부터 전달 받은 ref를 자식 컴포넌트에 연결함
2. useImperativeHandle 훅 사용 - 이 훅을 통해 부모에게 노출할 메서드나 속성을 정의함

명령형 핸들은 주로 DOM 요소에 직접 접근해야 하는 경우나 복잡한 애니메이션 제어 등에 유용함.

🍫 명령형 핸들이 뭔데?

명령형(imperative)

• 프로그래밍 패러다임을 가리킴.
• 프로그램의 상태를 변경하는 명령문을 사용하여 프로그램이 어떻게 동작해야 하는지를 상세히 기술함.
• React는 주로 선언적(declarative) 방식을 사용하지만, 이 기능은 더 직접적이고 명령적인 방식으로 컴포넌트를 조작할 수 있게 해줌.

핸들(handle)

• "조작하거나 제어할 수 있는 수단"을 의미
• 부모 컴포넌트가 자식 컴포넌트를 직접 조작할 수 있는 인터페이스나 "손잡이"를 제공한다는 의미

 

🍴 Effect가 뭐야?

: 컴포넌트의 렌더링 이후에 실행되는 부수 효과(side effect)를 관리하기 위한 기능. 

• 목적 - 데이터 가져오기, DOM 조작, 구독 설정 등 외부 시스템과의 동기화를 수행함.
• 사용 방법 - useEffect 훅을 통해 구현함.
• 실행 시점 - 컴포넌트가 렌더링 된 후 실행됨.
• 의존성 배열 - 특정 값이 변경될 때만 Effect를 실행하도록 제어할 수 있음.
• 정리(clean up) - 필요한 경우 Effect의 정리 함수를 반환하여 메모리 누수를 방지함.

사용자가 버튼을 클릭할 때마다 클릭 횟수를 화면에 표시하고, 동시에 문서의 제목을 업데이트 하는 코드.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Effect: 문서 제목 업데이트
    document.title = `클릭 횟수: ${count}`;

    // 정리(cleanup) 함수
    return () => {
      document.title = 'React App';
    };
  }, [count]); // 의존성 배열: count가 변경될 때만 Effect 실행

  return (
    <div>
      <p>버튼을 {count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
        클릭
      </button>
    </div>
  );
}

export default ExampleComponent;