이벤트 핸들러는 같은 상호작용을 다시 할 때만 재실행돼요. 이벤트 핸들러와는 다르게 이펙트는 props이나 상태 변수와 같이 읽으려는 값이 이전에 렌더링을 할 때와 달라졌을 때 바뀌어요. 때때로 이 두 행동을 혼합하고 싶을 때가 있을 거예요. 특정 값에만 반응하여 재실행 되는 이펙트를 만들고 싶을 수도 있어요. 이 페이지에서는 어떻게 그런 이펙트를 만드는지 알려줄 거예요. 이 페이지에서는 - 이벤트 핸들러와 이펙트 사이에서 어떻게 선택할 것인지 - 이펙트가 왜 반응적이고 이벤트 핸들러가 왜 그렇지 않은지 - 이펙트의 코드가 반응적이지 않을 때는 무엇을 해야하는지 - 이펙트 이벤트가 무엇이고 이펙트에서 이들을 어떻게 분리해야하는지 - 최근 props와 상태를 이펙트 이벤트를 사용하여 이펙트에서 어떻게 읽는..
리액트 공식문서 | React Docs
이펙트는 컴포넌트와 다른 생명주기를 가져요. 컴포넌트는 마운트, 업데이트 또는 언마운트 돼요. 이펙트는 무언가와 동기화를 시작하는 작업과 이후에 동기화를 중지하는 작업만을 수행할 수 있어요. 이 주기는 이펙트가 시간이 지나면서 변하는 props나 상태에 기반하고 있다면 여러번 발생해요. 리액트는 이펙트의 의존성을 올바르게 지정했는지를 확인하는 린터 규칙을 제공해요. 이를 통해 이펙트는 최신 props 및 상태와 동기화돼요. 이 페이지에서는 - 이펙트의 생명주기가 컴포넌트의 생명주기와 어떻게 다른지 - 각각의 이펙트를 어떻게 분리해서 생각하는지 - 이펙트가 다시 동기화되어야 할 때는 언제고 왜인지 - 이펙트의 의존성을 어떻게 결정하는지 - 값이 반응적이라는 것은 무슨 의미인지 - 빈 의존성 배열이 무엇을 ..
이펙트는 리액트 패러다임에서 해치 탈출구의 역할을 해요. 그리고 나서 리액트의 "바깥으로 나가서" 컴포넌트를 리액트가 아닌 위젯이나 네트워크 또는 브라우저 DOM과 같은 외부 시스텀과 동기화 시켜줘요. 만약 (props나 상태가 바뀔 때 컴포넌트의 상태를 업데이트 하고 싶은 상황과 같이) 외부 시스템을 포함하고 있지 않다면 이펙트가 필요하지 않는 상황이에요. 불필요한 이펙트를 제거하면 코드를 이해하기 더 쉬워지고, 더 빠르게 실행되며, 에러가 발생할 확률을 낮춰줘요. 이 페이지에서는 - 불필요한 이펙트를 컴포넌트에서 왜 그리고 어떻게 제거해야하는지 - 이펙트가 없이 고비용의 연산을 어떻게 캐싱하는지 - 이펙트가 없이 컴포넌트의 상태를 어떻게 초기화하고 조정하는지 - 이벤트 핸들러 간에 로직을 어떻게 공유..
어떤 컴포넌트는 외부 시스템과 동기화할 피료아 있어요. 리액트의 상태에 기반하여 리액트가 아닌 컴포넌트를 조작하고 싶거나 서버 연결을 설정하거나 컴포넌트가 화면에 나타날 때 통계 로그를 전송하고 싶을 때가 그 예시에요. 이펙트는 렌더링 이후에 코드를 실행시켜주기 때문에 리액트 바깥의 시스템과 컴포넌트를 동기화할 수 있어요. 이 페이지에서는 - 이펙트가 무엇인지 - 이펙트는 이벤트와 어떻게 다른지 - 컴포넌트에서 이펙트를 어떻게 선언하는지 - 어떻게 불필요한 이펙트를 재실행하지 않도록 하는지 - 이펙트가 개발모드에서 두 번씩 실행되는 이유가 무엇이고 이를 어떻게 해결하는지 를 알아볼 거예요. What are Effects and how are they different from events? | 이펙트가 ..
리액트는 자동적으로 DOM을 렌더링 결과에 맞게 업데이트 하기 때문에 컴포넌트는 보통 DOM을 조작할 일이 없어요. 그러나 때때로 리액트가 관리하는 DOM 엘리먼트에 접근할 필요가 생겨요. 노드를 포커싱한다거나, 노드로 스크롤을 이동시켜야하거나, 크기와 위치를 측정해야할 때가 그 예에요. 리액트에는 이러한 것들을 해주는 내장 기능이 없기 때문에 ref로 DOM 노드를 지정해야해요. 이 페이지에서는 - 리액트가 관리하는 DOM 노드에 ref 속성으로 어떻게 접근해야하는지 - ref JSX 속성이 useRef 훅과 어떻게 연관이 있는지 - 다른 컴포넌트의 DOM 노드에 어떻게 접근하는지 - 어떤 경우가 리액트로 관리되는 DOM 노드를 수정해도 안전한 경우인지 를 알아볼 거예요. Getting a ref to..
컴포넌트가 어떤 정보를 "기억"하도록 하고 싶지만 그 정보로 새로운 렌더링을 발생시키고 싶지는 않다면 ref를 사용하세요. 이 페이지에서는 - 컴포넌트에 ref를 어떻게 추가하는지 - ref의 값을 어떻게 업데이트하는지 - 상태와 ref가 어떻게 다른지 - 어떻게 안전히 ref를 사용하는지 를 알아볼 거예요. Adding a ref to your component | 컴포넌트에 ref 추가하기 리액트에서 useRef 훅을 불러와서 컴포넌트에 ref를 추가할 수 있어요. import { useRef } from 'react'; 컴포넌트에서 useRef 훅을 호출하고 첫 번째 인자로 참조하고 싶은 초기값을 전달하세요. 예를 들어 아래 예시는 값이 0인 ref에요. const ref = useRef(0); u..
리듀서는 컴포넌트의 상태 업데이트 로직을 통합시켜줘요. 컨텍스트는 정보를 다른 컴포넌트까지 전달해줘요. 여러분은 복잡한 화면의 상태를 관리하기 위해 리듀서와 컨텍스트를 함께 사용할 수 있어요. 이 페이지에서는 - 리듀서를 컨텍스트와 어떻게 결합하는지 - props를 통해 상태와 디스패치를 전달하지 않는 방법은 무엇인지 - 어떻게 컨텍스트와 상태 로직을 각각 분리된 파일에 넣는지 를 알아볼 거예요. Combining a reducer with context | 컨텍스트와 리듀서 결합하기 리듀서를 소개한 문서에서 나왔던 이 예시에서 상태는 리듀서로 관리돼요. 리듀서 함수는 모든 상태 업데이트 로직을 포함하고 이 파일의 가장 아래에서 선언되었어요. 리듀서는 이베느 헨들러가 더 짧고 간결해지도록 만들어줘요. 그..
보통은 props를 통하여 부모 컴포넌트에서 자식 컴포넌트까지 정보를 전달할 거예요. 하지만 만약 props를 중간에 있는 많은 컴포넌트를 통해 전달한다면 또는 앱 안에 있는 여러 컴포넌트에 동일한 정보가 필요하다면 props를 전달하는 것은 너무 구구절절하고 불편해요. 컨텍스트는 명시적으로 props를 전달하지 않아도 부모 컴포넌트가 깊이 상관 없이 트리 안에 있는 어떤 컴포넌트에게 정보를 전달할 수 있도록 만들어줘요. 이 페이지에서는 - "props drilling"이 무엇인지 - 어떻게 반복적인 prop 전달을 컨텍스트로 대체할 수 있는지 - 컨텍스트의 일반적인 사용 사례 - 컨텍스트를 대체할 수 있는 일반적인 방법들 을 알아볼 거예요. The problem with passing props | p..
여러 이벤트 핸들러에 뿌려진 상태 업데이트가 많은 컴포넌트는 압도적이에요. 이러한 경우에는 모든 업데이트 로직을 컴포넌트 외부에 하나의 함수로 통합할 수 있는데 이를 리듀서라고 불러요. 이 페이지에서는 - 리듀서 함수가 무엇인지 - useState를 useReducer로 어떻게 리팩토링 하는지 - 리듀서를 언제 사용하는지 - 어떻게 써야 올바르게 쓰는지 를 알아볼 거예요. Consolidate state logic with a reducer | 리듀서로 상태 로직 합치기 컴포넌트가 복잡해질수록 컴포넌트의 상태가 업데이트되는 방법을 힐끗 봐서는 알 수가 없어요. 예를 들어 아래의 TaskApp 컴포넌트는 tasks의 배열을 상태로 가지고 있고 할 일의 추가, 삭제, 수정을 위한 3개의 서로 다른 이벤트 핸..
상태는 컴포넌트들에서 독립되어 있어요. 리액트는 어떤 상태가 어떤 컴포넌트에 들어가있는지를 UI 트리 내에서의 위치에 기반하여 추적해요. 여러분은 리렌더링 사이에서 언제 상태를 보존하고 언제 상태를 초기화 해야하는지를 통제할 수 있어요. 이 페이지에서는 - 리액트가 언제 상태를 보존하는지 혹은 언제 상태를 초기화하는지 - 리액트가 컴포넌트의 상태를 어떻게 강제로 초기화하는지 - 키와 타입이 상태가 보존되는데 어떤 영향을 미치는지 를 알아볼 거예요. State is tied to a position in the render tree | 상태는 렌더트리에서의 위치와 연결되어 있다 리액트는 UI에서 컴포넌트 구조로 렌더 트리를 만들어요. 컴포넌트의 상태를 만들 때, 상태는 컴포넌트 안에 "거주한다"라고 생각해..
