리액트 공식문서 학습기록 https://react.dev/learn Removing Effect Dependencies 종속성은 코드와 일치해야함 Effect는 반응값에 '반응’함. 그래서 linter는 그게 종속성에 있는지 확인함. 고로 linter가 시키는대로 하셈. 종속성을 제거하고 싶으면 [] 빈배열 던지셈 종속성을 변경하려면 코드를 고치셈 Effect의 코드를 변경하거나 반응값이 선언되는 방식을 변경 linter가 시키는 대로 종속성 조정 맘에 안 들면 1번으로 돌아가서 코드 변경 불필요한 의존성 제거 코드를 이벤트 핸들러로 이동해야하는지 -> 꼭 Effect여야하는지 여부 Effect가 관련없는 일을 하고 있는가? -> 별도 통신을 한다던지 다음 상태를 계산하기 위해 일부 상태를 읽고있는지 -..

리액트 공식문서 학습기록 https://react.dev/learn Separating Events from Effects 이벤트 핸들러와 Effect 중에 선택 이벤트 핸들러 - 상호작용될때(수동) Effect - 동기화가 필요할때(자동) 반응 값 및 반응 논리 컴포넌트 내부에 선언된 props, state 및 변수를 반응값이라고 함. 이벤트 핸들러 내부의 로직은 반응하지 않음. 이펙트 내부의 로직은 반응적임 Effect에서 비반응 로직 추출 useEffectEvent를 사용하자. function ChatRoom({ roomId, theme }) { const onConnected = useEffectEvent(() => { showNotification('Connected!', theme); }); ..

리액트 공식문서 학습기록 https://react.dev/learn Lifecycle of Reactive Effects Effect는 컴포넌트와 라이프사이클이 다름. Effect의 수명 주기 컴포넌트가 마운트되면 React가 동기화를 시작 하고 컴포넌트가 마운트 해제되면 동기화를 중지한다고 생각할 수 있음. 경우에 따라 구성 요소가 마운트된 상태로 유지되는 동안 동기화를 여러 번 시작하고 중지 해야 할 수도 있음. 동기화가 두번 이상 필요한 이유 ex) 채팅방에서 방이 바뀔때 연결을 재설정하는 것을 예제로 들고 있음. Effect를 재동기화하는 법 정리를 하자 Effect의 관점에서 생각하기 컴포넌트 관점 ChatRoomroomId로 설정 하여 장착"general" ChatRoomroomId로 설정하여..

리액트 공식문서 학습기록 https://react.dev/learn You Might Not Need an Effect 불필요한 Effect를 제거하는 방법 렌더링을 위해 데이터를 변환하는데는 Effect가 필요하지 않음. ex) 데이터 필터링 -> 컴포넌트 최상위에서 변환하셈 사용자 이벤트를 처리하기 위해 Effect가 필요하지 않음. ex) /api/buy 요청을 보냈을때 -> 구매버튼 클릭 이벤트 핸들러에서 무슨일이 일어났는지 정확히 알 수 있음. props나 상태 기반으로 상태 업데이트 상태가 변경되면 어차피 리렌더링이 일어나니 불필요한 작업을 줄이자가 핵심인듯 function Form() { const [firstName, setFirstName] = useState('Taylor'); cons..

리액트 공식문서 학습기록 https://react.dev/learn Synchronizing with Effects React에서 Effect는 렌더링으로 인한 부작용을 나타냄. Effect가 필요없을 수 있음 브라우저 API, 타사 위젯, 네트워킹 등 Effect 작성방법 Effect 선언 종속성 지정 - 필요할때만 실행되어야하므로 종속성을 지정하여 이를 제어함. 정리 추가 - connect + disconnect, subscribe + unsubscribe 등 1단계 - Effect 선언 import { userEffect } from 'react'; //컴포넌트 최상위에 호출 const App = () => { useEffect(() => { // }); return ; }; useEffect는 렌..

리액트 공식문서 학습기록 https://react.dev/learn Manipulating the DOM with Refs 노드에 ref 연결 import { useRef } from 'react'; const myRef = useRef(null); inputRef.current.focus(); scrollIntoView 사파리 호환성이 또 발목 잡네 루프 내 사용 ref 콜백 - 속성에 함수를 전달 한줄요약 - ref에 map, object등으로 dom node 관리 다른 컴포넌트의 dom 노드에 접근 아래처럼 ref를 전달 받아야함 import { forwardRef, useRef } from 'react'; const MyInput = forwardRef((props, ref) => { return..

리액트 공식문서 학습기록 https://react.dev/learn Referencing Values with Refs 컴포넌트가 정보를 저장하지만 해당 정보가 새 렌더링을 트리거 하지 않으려면 ref를 사용할 수 있음. 컴포넌트에 ref 추가 import { useRef } from 'react'; const ref = useRef(0); useRef는 다음과 같은 객체를 반환 { current: 0 // ref.current로 접근 } current는 js 객체 이므로 아무거나 넣을 수 있음. 스탑워치 만들어보기 clearInterval에서 호출되는 ID는 렌더링에 사용되지 않으므로 ref에 보관 import { useState, useRef } from 'react'; export default f..

리액트 공식문서 학습기록 https://react.dev/learn Scaling Up with Reducer and Context 리듀서와 컨텍스트 결합 컴포넌트가 많아질수록 리듀서의 상태 및 함수 전달이 힘듬. 따라서 props 대신 tasks와 dispatch 함수를 컨텍스트에 넣어 사용. 1단계 - 컨텍스트 만들기 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); 나중에 다른 파일에서 가져다 쓰게 별도의 파일에서 export함. import { createContext } from 'react'; export const TasksContext = createContext(null); export const TasksDispatch..

리액트 공식문서 학습기록 https://react.dev/learn Passing Data Deeply with Context 심층적으로 전달이 필요할때 사용 1단계 - 컨텍스트 만들기 import { createContext } from 'react'; export const LevelContext = createContext(1); 2단계 - 컨텍스트 사용 다른 hook과 마찬가지로 컴포넌트내의 최상위에서만 호출가능 import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; export default function Heading({ children }) { const level = useContext(Le..

리액트 공식문서 학습기록 https://react.dev/learn Extracting State Logic into a Reducer Reducer로 많은 상태를 한곳에 잘 정리하자. 1단계 : 이벤트 핸들러에서 상태 빼기 dispatch를 통해 작업 전달 구조는 상관없으나 type은 일반적으로 들어간다. function handleAddTask(text) { dispatch({ type: 'added', id: nextId++, text: text, }); } function handleChangeTask(task) { dispatch({ type: 'changed', task: task, }); } 2단계 - reducer 함수 작성 요런 너낌 function tasksReducer(tasks, a..