sohyeon kim

💡 리액트 공식문서 정리 : 탈출구 - 커스텀 Hook 으로 로직 재사용하기React 는 useState, useContext, useEffect 와 같은 Hook 들이 내장되어 있다.때로는 데이터를 가져오거나 사용자가 온라인 상태인지 여부를 추적하는 등 좀 더 구체적인 목적을 가진 Hook 을 원할 수 있다.이를 위해 애플리케이션의 필요에 알맞는 자신만의 커스텀 Hook 을 생성할 수 있다.앱이 성장함에 따라 이미 작성한 커스텀 Hook 을 재사용할 수 있으므로 직접 작성하는 Effect 의 수가 줄어들 것이다. 1. 커스텀 Hook : 컴포넌트간 로직 공유하기네트워크에 크게 의존하는 앱을 개발 중이라고 가정하자. 사용자가 앱을 사용하던 중 네트워크가 갑자기 사라진다면, 사용자에게 경고하고 싶을 것이..

💡 리액트 공식문서 정리 : 탈출구 - 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); // 동기화 시작 ..

💡 리액트 공식문서 정리 : State 관리하기 - State 로직을 리듀서로 작성하기, Context 를 사용해 데이터를 깊게 전달하기, Reducer 와 Context 로 앱 확장하기 5.  State 로직을 reducer 로 작성하기 여러 이벤트 핸들러를 통해 많은 state 업데이트가 이루어지는 컴포넌트는 관리하기 어려울 수 있다.이를 위해 컴포넌트 외부에서 'reducer'라는 단일 함수를 사용해 모든 state 업데이트 로직을 통합할 수 있다.이벤트 핸들러는 오로지 사용자의 'action'만을 명시하므로 간결해진다. reducer 를 사용해 state 로직 통합하기아래의 TaskApp 컴포넌트는 state 에 tasks 배열을 보유하고 있고, 세 가지 이벤트 핸들러를 통해 task 를 추가,..