useEffect

React Hook을 사용할 때 실수들 (2): useEffect

서론 React에서 컴포넌트의 lifecycle에 맞춰 동작하는 useEffect는 매우 자주 사용되는 훅이다. 하지만 이 훅을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useEffect를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. 객체는 참조한다 JavaScript에서 객체는 non-primitive 자료형이다. 즉, 객체의 내용이 같아도 두 객체는 서로 다른 참조 값을 가진다. 예를 들어 다음 코드를 보자.const obj1 = { a: 1 };const obj2 = { a: 1 };console.log(obj1 === obj2); // false 이 두 객체는 구조가 같지만 서로 다른 참조를 갖고 있으므로 === 비교에서는 false가 ..

React Hook 이해하기 (2): useEffect

React 컴포넌트에서 상태를 관리하거나 이벤트 핸들러를 통해 사용자와 상호작용하는 경우, Side Effects가 발생하게 된다. 일반적으로 이벤트 핸들러는 사이드 이펙트를 포함한다. 그러나, 렌더링 자체로 인해 발생하는 사이드 이펙트를 처리해야 할 때는 useEffect 훅이 필요하다. 이 글에서는 useEffect의 개념, 동작 방식, 그리고 효과적인 사용 방법에 대해 설명하겠다.사이드 이펙트란? 사이드 이펙트란 프로그램의 상태를 변경하거나 외부 시스템과 상호작용하는 것을 의미한다. 예를 들어, 사용자가 버튼을 클릭하여 메시지를 전송하는 것은 이벤트에 의한 사이드 이펙트다. 반면, 컴포넌트가 렌더링될 때 외부 API로부터 데이터를 가져오는 작업은 렌더링으로 인해 발생하는 사이드 이펙트다. 이러한 렌..