리액트에서 상태 없는 함수 컴포넌트에서 클래스 인스턴스를 초기화하는 방법
리액트로 작업하다가 상태 없는 함수 컴포넌트에서 클래스 인스턴스를 초기화하려고 할 때 도전을 맞이할 수 있습니다. 상태 있는 컴포넌트에서는 생성자에서 도우미 클래스를 간편하게 초기화하고 라이프사이클 메서드에서 해당 메서드를 사용할 수 있지만, 상태 없는 함수 컴포넌트에서는 프로세스가 다릅니다.
상태 있는 컴포넌트에서는 일반적으로 다음과 같이 코드를 작성합니다:
class StatefulComponent extends Component {
constructor(props) {
super(props);
this.helper = new HelperClass();
}
componentDidMount() {
this.helper.doSomething();
}
}
그러나 이러한 로직을 상태 없는 함수 컴포넌트로 변환할 때는 클래스의 인스턴스가 매 prop 변경마다 다시 생성되는 문제가 발생할 수 있습니다. 이로 인해 불필요한 부하가 발생하고 성능에 부정적인 영향을 미칠 수 있습니다. 이런 경우, 클래스 인스턴스의 재생성을 방지하고 ref를 사용하는 방법은 무엇일까요?
useState를 사용하여 클래스 인스턴스 초기화하기
이 문제를 해결하는 한 가지 방법은 React의 useState 훅을 사용하는 것입니다. useState를 활용하면 컴포넌트의 수명 동안 클래스의 인스턴스를 생성하고 보존할 수 있습니다. 다음은 예시입니다:
const [helper] = useState(() => new HelperClass());
useEffect(() => {
helper.doSomething();
}, []);
이 방법은 인스턴스가 컴포넌트의 초기 렌더링 중에 한 번만 생성되도록 보장합니다. 후속 재렌더링은 인스턴스가 불필요하게 다시 생성되지 않습니다.
useRef와 useEffect 사용하기
다른 방법은 useRef 훅과 useEffect를 함께 사용하는 것입니다. 이 조합을 사용하여 클래스 인스턴스를 생성하고 ref에 저장하여 컴포넌트의 수명 동안 지속성을 보장할 수 있습니다. 다음은 예시입니다:
const helper = useRef();
useEffect(() => {
helper.current = new HelperClass();
helper.current.doSomething();
}, []);
이 방법에서는 인스턴스가 초기 렌더링 중에 생성되고 ref의 current 속성에 할당됩니다. useRef 훅을 사용하여 후속 재렌더링이 인스턴스를 다시 생성하지 않으며, helper.current를 사용하여 인스턴스에 액세스할 수 있습니다.
결론
리액트에서 상태 없는 함수 컴포넌트를 다룰 때 클래스 인스턴스를 초기화하는 것은 일부 어려움이 있을 수 있습니다. useState 훅 또는 useRef와 useEffect를 사용하여 인스턴스는 한 번만 생성되고 컴포넌트의 수명 동안 지속되도록 보장할 수 있습니다. 요구 사항에 가장 적합하고 응용 프로그램의 성능을 향상시키는 방법을 선택하세요. 즐거운 코딩하세요!
