반응형 FrontEnd/React11 리액트 | 리액트에서의 고차 컴포넌트 활용하기 리액트는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 이러한 인기는 리액트가 개발자들에게 제공하는 다양한 기능과 유연성 때문입니다. 그 중에서도 고차 컴포넌트(Higher-Order Component)는 리액트에서 매우 유용한 기능 중 하나입니다. 이번 글에서는 고차 컴포넌트가 무엇인지, 어떻게 활용할 수 있는지, 그리고 테스트 주도 개발(Test-Driven Development)과 타입스크립트(Typescript)와 함께 고차 컴포넌트를 사용하는 방법에 대해 알아보겠습니다. 고차 컴포넌트란? 고차 컴포넌트는 리액트에서 컴포넌트를 감싸는 함수입니다. 이 함수는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환합니다. 이렇게 반환된 컴포넌트는 원래의 컴포넌트를 감싸고 있으며, 그 안.. 2023. 4. 8. 리액트 | Maximum update depth exceeded 에러 해결하기 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 이 에러 메시지는 React에서 컴포넌트가 상태 업데이트의 무한 루프를 유발할 때 발생합니다. 무한 루프 발생 원인 🤓 일반적인 원인 중 하나는 useEffect 훅이 컴포넌트 내부에서 상태를 업데이트하면서, useEffect 훅이 의존성 배열이 없거나 의존성이 매번 렌더링될 때마다 변경되기 때문에 무한 루프를 발생시키는 것입니다. 예를 들어 다음.. 2023. 3. 14. 리액트 | 커스텀 훅에서 변경한 전역 상태가 컴포넌트에 반영되지 않을 때 해결 방법 🙌🏻 커스텀 훅에서 변경된 리코일 상태가 컴포넌트에 반영되지 않는 이유는 여러가지가 있을 수 있지만, 이 포스트에서는 리액트 라이프사이클과 관련된 내용을 다루고 있습니다. 커스텀 훅에서 전역 상태를 업데이트했는데, 컴포넌트 리렌더링은 일어나지 않는다?! 😣 리코일로 관리하는 상태를 업데이트해주는 커스텀 훅을 사용하는데, 상태가 업데이트 되어도 컴포넌트 리렌더링이 일어나지 않는다면 커스텀 훅에 useEffect() 훅을 통해 컴포넌트의 라이프사이클을 잘 제어하고 있는지 먼저 확인해보는게 좋습니다. 커스텀 훅은 일반적으로 리액트 컴포넌트 내부에서 사용됩니다. 컴포넌트는 상태(state) 또는 속성(props)이 변경될 때마다 다시 렌더링됩니다. 그러나 커스텀 훅은 컴포넌트의 라이프사이클과는 별개로 동작하기 때문에.. 2023. 3. 9. 리액트 | 리액트에서 마우스 이벤트 충돌 방지하는 방법 💥 이벤트 버블링을 이용하여 마우스 이벤트 충돌 방지하기 리액트에서 마우스 이벤트 충돌을 방지하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 이벤트 버블링(Event Bubbling)을 이용하여 이벤트를 처리하는 것입니다. 이벤트 버블링을 이용하여, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되어 중복된 이벤트가 발생하지 않도록 처리할 수 있습니다. 참고 : 이벤트 버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 말합니다. 🧑🏻💻 적용하기 예를 들어, 다음과 같은 코드에서는 Parent 컴포넌트와 Child 컴포넌트가 있으며, 각각 onClick 이벤트를 처리하는 함수가 정의되어 있습니다. function Parent() { function handleClick() { .. 2023. 2. 18. 이전 1 2 3 다음 반응형
