리액트 공식문서 학습기록 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..

리액트 공식문서 학습기록 https://react.dev/learn Preserving and Resetting State UI 트리 React는 JSX에서 UI 트리를 만듬. 그런 다음 React DOM은 해당 UI 트리와 일치하도록 브라우저 DOM 요소를 업데이트함. 상태는 트리의 위치에 연결됨. 상태는 실제로 React 내부에 있음. 그리고 DOM의 위치에 따라 각 상태 조각을 올바른 구성 요소와 연결함. 동일한 위치의 동일한 컴포넌트는 상태를 유지함 {isFancy ? ( ) : ( )} 위와 같은 경우 상태가 유지됨. 즉, 같은 위치면 상태가 유지된다고 함. UI 트리의 위치가 중요함. 같은 위치에 다른 컴포넌트 재설정 {isPaused ? ( See you later! ) : ( )} 위 같은..