이펙트는 컴포넌트와 다른 생명주기를 가져요. 컴포넌트는 마운트, 업데이트 또는 언마운트 돼요. 이펙트는 무언가와 동기화를 시작하는 작업과 이후에 동기화를 중지하는 작업만을 수행할 수 있어요. 이 주기는 이펙트가 시간이 지나면서 변하는 props나 상태에 기반하고 있다면 여러번 발생해요. 리액트는 이펙트의 의존성을 올바르게 지정했는지를 확인하는 린터 규칙을 제공해요. 이를 통해 이펙트는 최신 props 및 상태와 동기화돼요. 이 페이지에서는 - 이펙트의 생명주기가 컴포넌트의 생명주기와 어떻게 다른지 - 각각의 이펙트를 어떻게 분리해서 생각하는지 - 이펙트가 다시 동기화되어야 할 때는 언제고 왜인지 - 이펙트의 의존성을 어떻게 결정하는지 - 값이 반응적이라는 것은 무슨 의미인지 - 빈 의존성 배열이 무엇을 ..
전체 글
호이호이깐따삐아이펙트는 리액트 패러다임에서 해치 탈출구의 역할을 해요. 그리고 나서 리액트의 "바깥으로 나가서" 컴포넌트를 리액트가 아닌 위젯이나 네트워크 또는 브라우저 DOM과 같은 외부 시스텀과 동기화 시켜줘요. 만약 (props나 상태가 바뀔 때 컴포넌트의 상태를 업데이트 하고 싶은 상황과 같이) 외부 시스템을 포함하고 있지 않다면 이펙트가 필요하지 않는 상황이에요. 불필요한 이펙트를 제거하면 코드를 이해하기 더 쉬워지고, 더 빠르게 실행되며, 에러가 발생할 확률을 낮춰줘요. 이 페이지에서는 - 불필요한 이펙트를 컴포넌트에서 왜 그리고 어떻게 제거해야하는지 - 이펙트가 없이 고비용의 연산을 어떻게 캐싱하는지 - 이펙트가 없이 컴포넌트의 상태를 어떻게 초기화하고 조정하는지 - 이벤트 핸들러 간에 로직을 어떻게 공유..
어떤 컴포넌트는 외부 시스템과 동기화할 피료아 있어요. 리액트의 상태에 기반하여 리액트가 아닌 컴포넌트를 조작하고 싶거나 서버 연결을 설정하거나 컴포넌트가 화면에 나타날 때 통계 로그를 전송하고 싶을 때가 그 예시에요. 이펙트는 렌더링 이후에 코드를 실행시켜주기 때문에 리액트 바깥의 시스템과 컴포넌트를 동기화할 수 있어요. 이 페이지에서는 - 이펙트가 무엇인지 - 이펙트는 이벤트와 어떻게 다른지 - 컴포넌트에서 이펙트를 어떻게 선언하는지 - 어떻게 불필요한 이펙트를 재실행하지 않도록 하는지 - 이펙트가 개발모드에서 두 번씩 실행되는 이유가 무엇이고 이를 어떻게 해결하는지 를 알아볼 거예요. What are Effects and how are they different from events? | 이펙트가 ..