전체 글

이펙트는 컴포넌트와 다른 생명주기를 가져요. 컴포넌트는 마운트, 업데이트 또는 언마운트 돼요. 이펙트는 무언가와 동기화를 시작하는 작업과 이후에 동기화를 중지하는 작업만을 수행할 수 있어요. 이 주기는 이펙트가 시간이 지나면서 변하는 props나 상태에 기반하고 있다면 여러번 발생해요. 리액트는 이펙트의 의존성을 올바르게 지정했는지를 확인하는 린터 규칙을 제공해요. 이를 통해 이펙트는 최신 props 및 상태와 동기화돼요. 이 페이지에서는 - 이펙트의 생명주기가 컴포넌트의 생명주기와 어떻게 다른지 - 각각의 이펙트를 어떻게 분리해서 생각하는지 - 이펙트가 다시 동기화되어야 할 때는 언제고 왜인지 - 이펙트의 의존성을 어떻게 결정하는지 - 값이 반응적이라는 것은 무슨 의미인지 - 빈 의존성 배열이 무엇을 ..

이펙트는 리액트 패러다임에서 해치 탈출구의 역할을 해요. 그리고 나서 리액트의 "바깥으로 나가서" 컴포넌트를 리액트가 아닌 위젯이나 네트워크 또는 브라우저 DOM과 같은 외부 시스텀과 동기화 시켜줘요. 만약 (props나 상태가 바뀔 때 컴포넌트의 상태를 업데이트 하고 싶은 상황과 같이) 외부 시스템을 포함하고 있지 않다면 이펙트가 필요하지 않는 상황이에요. 불필요한 이펙트를 제거하면 코드를 이해하기 더 쉬워지고, 더 빠르게 실행되며, 에러가 발생할 확률을 낮춰줘요. 이 페이지에서는 - 불필요한 이펙트를 컴포넌트에서 왜 그리고 어떻게 제거해야하는지 - 이펙트가 없이 고비용의 연산을 어떻게 캐싱하는지 - 이펙트가 없이 컴포넌트의 상태를 어떻게 초기화하고 조정하는지 - 이벤트 핸들러 간에 로직을 어떻게 공유..

어떤 컴포넌트는 외부 시스템과 동기화할 피료아 있어요. 리액트의 상태에 기반하여 리액트가 아닌 컴포넌트를 조작하고 싶거나 서버 연결을 설정하거나 컴포넌트가 화면에 나타날 때 통계 로그를 전송하고 싶을 때가 그 예시에요. 이펙트는 렌더링 이후에 코드를 실행시켜주기 때문에 리액트 바깥의 시스템과 컴포넌트를 동기화할 수 있어요. 이 페이지에서는 - 이펙트가 무엇인지 - 이펙트는 이벤트와 어떻게 다른지 - 컴포넌트에서 이펙트를 어떻게 선언하는지 - 어떻게 불필요한 이펙트를 재실행하지 않도록 하는지 - 이펙트가 개발모드에서 두 번씩 실행되는 이유가 무엇이고 이를 어떻게 해결하는지 를 알아볼 거예요. What are Effects and how are they different from events? | 이펙트가 ..