※ 사용하는 이유 - forwardRef : 부모 컴포넌트에서 선언한 ref를 자식 컴포넌트에 전달하기 위해 사용한다. - useImperativeHandle : 인자로 받은 부모의 ref를 자식 컴포넌트 측에서 커스터마이징할 수 있다.
※ 예시
import React, { forwardRef, useImperativeHandle, useRef, useEffect } from 'react';
// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
const inputRef = useRef();
// useImperativeHandle을 사용하여 ref로 전달할 함수나 속성을 정의
useImperativeHandle(ref, () => ({
// 외부에서 호출 가능한 focus 함수를 정의
focus: () => {
inputRef.current.focus();
},
}));
return <input ref={inputRef} placeholder="Type here" />;
});
// 부모 컴포넌트
const ParentComponent = () => {
const childRef = useRef();
useEffect(() => {
// 부모 컴포넌트에서 자식 컴포넌트의 focus 함수 호출
childRef.current.focus();
}, []);
return (
<div>
<p>Clicking the button will focus the input in the child component:</p>
<ChildComponent ref={childRef} />
</div>
);
};
export default ParentComponent;
useEffect
※ 사용하는 이유 - 함수형 컴포넌트에서 side effects를 처리하기 위한 Hook으로 컴포넌트의 마운트, 업데이트, 언마운트 시 수행할 작업들을 지정할 때 사용한다. - 의존성 배열을 통해 특정 값이 변할 때 실행을 해줄 수 있다. - return문을 사용해 컴포넌트가 언마운트되거나 의존성 배열의 값이 변경될 때 clean-up을 해줄 수 있다. - 주로 API 요청을 통해 데이터를 가져올 때 많이 사용한다.
※ 예시 - 소스 코드
import React, { useEffect, useState } from "react";
export default function Effect() {
const [firstFlag, setFirstFlag] = useState(false);
const [secondFlag, setSecondFlag] = useState(false);
useEffect(() => {
console.log("의존성 배열 X => 컴포넌트 렌더링 시마다 호출");
});
useEffect(() => {
console.log("의존성 배열 (빈배열) => 최초 렌더링(마운트) 시에만 호출");
}, []);
useEffect(() => {
console.log("의존성 배열 (값) => 값이 바뀔때마다 호출");
}, [firstFlag]);
const handleFlagChange = () => {
console.log("값 변경 O");
setFirstFlag((prev) => !prev);
};
const handleFlagNotChange = () => {
console.log("값 변경 X");
setSecondFlag((prev) => !prev);
};
return (
<>
<button onClick={handleFlagChange}>First Flag State Change</button>
<button onClick={handleFlagNotChange}>Second Flag State Change</button>
</>
);
}
- 화면 - 컴포넌트 최초 마운트 - First Flag State Change 버튼 클릭 - Second Flag State Change 버튼 클릭
useReducer
※ 사용하는 이유 - 가독성 : 상태 변경 로직이 복잡해질 경우 useReducer를 사용하여 상태변경 로직을 컴포넌트와 분리시켜 별도로 관리할 수 있다. - 재사용성 : 공통적으로 사용하는 상태관련 로직이 있을 경우 useReducer를 사용하여 코드를 줄일 수 있다.
