이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 React 공식문서 -useReducer - useReducer는 컴포넌트에 reducer를 추가할 수 있는 React 훅이다. - useReducer는 useState와 매우 유사하지만 이벤트 핸들러의 state 업데이트 로직을 컴포넌트 외부의 단일 함수로 옮길 수 있다. State는 읽기 전용입니다. state 객체나 배열을 수정하지 마세요 // 잘못된 예시 function reducer(state, action) { switch (action.type) { case 'incremented_age': { // 🚩 Don't mutate an object in state like this: state.age = state.age + 1; return state; } // state의 객체나 배열을 수정하는 대신 새로운 객체를 반환해야 한다. .. React 공식문서 -useCallback - useCallback은 리렌더링 사이에서 함수 정의를 캐시할 수 있게 해주는 React 훅이다. Parameters(매개변수) - fn : 캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 값이라도 반환할 수 있다. - dependencies : fn 코드 내에서 참조된 모든 반응형 값의 배열 Returns(반환 값) - 초기 렌더링에서 useCallback은 전달한 fn 함수를 반환한다. - 렌더링 중 : 마지멕 렌더링에서 이미 저장된 fn 함수 또는 렌더링 중에 전달했던 fn 함수 반환 * How is useCallback related to useMemo(useCallback과 useMemo는 무슨 관련이 있을까요?) - 공통점 : 자식 컴포넌트를 최적화하려고 할 때, 두 가지 모두 유용하다.. React 공식문서 -useMemo - useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. Parameters(매개변수) - calculateValue : 캐시하려는 값을 계산하는 함수, 순수해야하며 인자를 받지 않고 반드시 어떤 타입이든 값을 반환해야 한다. React는 초기 렌더링 중에 함수를 호출하고, 이후 렌더링에서는 의존성이 이전 렌더링 이후 변경되지 않았다면 동일한 값을 반환한다. - dependencies : calculateValue 코드 내에서 참조되는 모든 반응형 값들의 목록. React는 Object.is 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교한다. Returns(반환값) - 초기 렌더링에서 useMemo는 인자 없이 calculateValue를 호출한 결과를 반환한다. - 이.. React 공식문서 -useState - useState는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React 훅이다. Avoiding recreating the initial state(초기 state 다시 생성하지 않기) - useState의 매개변수에는 초기 state 값으로 설정할 값이 들어가고, 값은 모든 데이터 타입이 허용된다. - 초기 state 값으로 함수를 전달하면, 이는 초기화 함수로 취급되며 이 함수는 순수해야 하고 인자를 받지 않아야 하며 반드시 어떤 값을 반환해야 한다. - 즉, React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다. function TodoList() { const [todos, setTodos] = useState(createInitialTo.. React 공식문서 -Reusing Logic with Custom Hooks(커스텀 훅으로 로직 재사용하기) Custom Hooks: Sharing logic between components(커스텀 훅: 컴포넌트간의 로직 공유) import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', h.. React 공식문서 -Removing Effect Dependencies(Effect 의존성 제거하기) - Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는 모든 반응형(예: props 및 state)을 포함했는지 확인한다. - 이때 불필요한 의존성으로 인해 Effect가 너무 자주 실행되거나 무한 루프를 생성할 수도 있다. To remove a dependency, prov that it's not a dependency(의존성을 제거하려면 의존성이 아님을 증명하세요) - Effect의 의존성을 "선택"할 수는 없다. - Effect의 코드에서 사용되는 모든 반응형 값은 의존성 목록에 선언되어야 한다. - 반응형 값에는 props와 컴포넌트 내부에서 직접 선언된 모든 변수 및 함수가 포함된다. - 만약 의존성을 제거하려면 해당 의존성이 의존성 배열에 추가될 필요가 없다는 것.. React 공식문서 -Separating Events from Effects(이벤트와 Effect 분리하기) - 이벤트 핸들러는 같은 상호 작용을 다시 수행할 때만 다시 실행된다. - 이벤트 핸들러와 달리 Effect는 prop 또는 state 변수와 같은 일부 값을 마지막 렌더링 때와 다른 값으로 읽게 되면 다시 동기화된다. - 이 챕터에서는 값에 대한 응답으로 다시 실행되는 Effect와 그렇지 않은 Effect의 혼합이 필요한 경우에 어떻게 이를 수행하는지 알아본다. Effects run whenever synchronization is needed(Effect는 동기화가 필요할 때마다 실행됩니다) - 이벤트 핸들러는 특정 상호 작용에 대한 처리를 할 때 사용한다. - Effect는 코드를 사용자가 수행한 특정 상호작용과는 무관하게, 코드가 실행되었을 때 실행되는 내용에 사용한다. Reactive va.. React 공식문서 -Lifecycle of Reactive Effects(반응형 Effect의 생명주기) - Effect는 컴포넌트와 다른 생명주기를 갖는다. - Effect는 컴포넌트와 달리 동기화를 시작하고 나중에 동기화를 중지하는 두 가지 작업만 할 수 있는데, 이 사이클은 props와 state에 의존하는 Effect의 경우 여러 번 발생할 수 있다. The lifecycle of an Effect (Effect의 생명주기) - React의 모든 컴포넌트는 동일한 생명주기를 거친다. 1. 컴포넌트는 화면에 추가될 때 마운트 된다. 2. 컴포넌트는 새로운 props나 state를 받으면 업데이트 된다. 3. 화면에서 제거되면 컴포넌트가 마운트 해제된다. - 각 Effect를 컴포넌트의 생명주기와 독립적으로 생각해라. const serverUrl = 'https://localhost:1234'; func.. 이전 1 2 3 4 5 6 7 다음
