sohyeon kim

💡 리액트 공식문서 정리 : 탈출구 - Effect 의존성 제거하기effect 를 작성하면 린터는 effect 의 의존성 배열에 effect 가 읽는 모든 반응형 값(props 나 state 등)을 포함했는지 확인한다.린터에 따라 반응형 값을 의존성 배열에 포함하면 effect 가 컴포넌트의 최신 props 및 state 와 동기화 상태를 유지할 수 잇게 된다.하지만 불필요한 의존성으로 인해 effect 가 너무 자주 실행되거나 무한 루프를 생성할 때도 있다.effect 에서 불필요한 의존성을 검토하고 제거하는 방법에 대해 알아보자. 1️⃣ 의존성은 항상 코드와 일치해야 한다.effect 를 작성할 땐 먼저 effect 가 수행하기를 원하는 작업을 시작하고 중지하는 방법을 지정한다.그 다음 effect..

💡 리액트 공식문서 정리 : 탈출구 - 반응형 Effect 의 생명주기, Effect 에서 이벤트 분리하기 1. 반응형 Effect 의 생명주기 : 동기화 시작 & 중지Effect 는 컴포넌트와 다른 생명주기를 가진다. 컴포넌트는 마운트/업데이트/마운트 해제의 생명주기를 가지지만,Effect 는 동기화를 시작하거나 중지하는 두 가지 작업만 할 수 있다. 다음 Effect 는 roomId prop 값에 의존한다. roomId 가 변경되면 Effect 가 다시 동기화(및 서버에 다시 연결)한다.function ChatRoom({ roomId }) { useEffect(() => { const connection = createConnection(serverUrl, roomId); // 동기화 시작 ..