소요유(逍遙遊)

리액트는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 이러한 인기는 리액트가 개발자들에게 제공하는 다양한 기능과 유연성 때문입니다. 그 중에서도 고차 컴포넌트(Higher-Order Component)는 리액트에서 매우 유용한 기능 중 하나입니다. 이번 글에서는 고차 컴포넌트가 무엇인지, 어떻게 활용할 수 있는지, 그리고 테스트 주도 개발(Test-Driven Development)과 타입스크립트(Typescript)와 함께 고차 컴포넌트를 사용하는 방법에 대해 알아보겠습니다. 고차 컴포넌트란? 고차 컴포넌트는 리액트에서 컴포넌트를 감싸는 함수입니다. 이 함수는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환합니다. 이렇게 반환된 컴포넌트는 원래의 컴포넌트를 감싸고 있으며, 그 안..

FrontEnd/React 2023. 4. 8. 19:47

개발자로서 테스트는 개발 프로세스의 중요한 부분입니다. 코드가 예상대로 작동하는지 확인하고 잠재적인 문제를 예방하는 데 도움이 됩니다. React에서는 효과적인 테스트를 작성하는 데 도움이되는 여러 가지 테스트 라이브러리가 있습니다. 이 글에서는 Jest, React Testing Library, Enzyme 등 React를 위한 가장 인기있는 테스트 라이브러리를 살펴보겠습니다. 1. 테스트란? 테스트는 코드가 예상대로 작동하는지 확인하는 프로세스입니다. 주어진 입력에 대해 올바른 출력을 생성하는지 확인하기 위해 코드를 일련의 테스트를 실행하는 것을 포함합니다. 테스트는 수동 또는 자동으로 수행할 수 있으며, 개발 프로세스의 다양한 단계에서 수행할 수 있습니다. 테스트는 왜 해야할까? 테스트는 다음과 같..

FrontEnd/Libraries 2023. 4. 3. 19:24

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 훅이 의존성 배열이 없거나 의존성이 매번 렌더링될 때마다 변경되기 때문에 무한 루프를 발생시키는 것입니다. 예를 들어 다음..

FrontEnd/React 2023. 3. 14. 01:33

커스텀 훅에서 변경된 리코일 상태가 컴포넌트에 반영되지 않는 이유는 여러가지가 있을 수 있지만, 이 포스트에서는 리액트 라이프사이클과 관련된 내용을 다루고 있습니다. 커스텀 훅에서 전역 상태를 업데이트했는데, 컴포넌트 리렌더링은 일어나지 않는다?! 😣 리코일로 관리하는 상태를 업데이트해주는 커스텀 훅을 사용하는데, 상태가 업데이트 되어도 컴포넌트 리렌더링이 일어나지 않는다면 커스텀 훅에 useEffect() 훅을 통해 컴포넌트의 라이프사이클을 잘 제어하고 있는지 먼저 확인해보는게 좋습니다. 커스텀 훅은 일반적으로 리액트 컴포넌트 내부에서 사용됩니다. 컴포넌트는 상태(state) 또는 속성(props)이 변경될 때마다 다시 렌더링됩니다. 그러나 커스텀 훅은 컴포넌트의 라이프사이클과는 별개로 동작하기 때문에..

FrontEnd/React 2023. 3. 9. 00:12

😭 에러 발생 원인 참고 : "Expected static flag was missing" 오류는 React 18에서 새롭게 도입된 정적 렌더링(Static Rendering)과 관련된 에러입니다. 이 오류는 React 18에서의 새로운 기능 중 하나인 정적 렌더링과 관련하여 발생합니다. 정적 렌더링은 서버 측에서 React 애플리케이션을 렌더링하여 초기 HTML을 생성한 후, 클라이언트 측에서 React 애플리케이션을 마운트하여 상호작용성을 제공하는 방법입니다. 이를 위해 React는 렌더링된 컴포넌트가 정적인지 동적인지 구분하기 위한 "정적 플래그(Static Flag)"라는 새로운 개념을 도입하였습니다. "Expected static flag was missing" 오류는 이 정적 플래그가 누락되었..

FrontEnd/React 2023. 2. 16. 02:33

1. URL 매개변수 이용하기 URL 매개 변수를 사용하여 데이터를 전달할 수 있습니다. 예를 들어, /products?category=shoes와 같은 URL을 사용하여 카테고리가 "신발"인 제품 목록 페이지로 이동할 수 있습니다. 이 방법은 React Router의 Link 컴포넌트를 사용하여 구현할 수 있습니다. import { Link } from 'react-router-dom'; function MyComponent() { const categoryId = 123; return ( 상품 목록 ); } 2. React 컴포넌트 props로 전달하기 Link 컴포넌트 대신, 다른 페이지로 이동할 때 React 컴포넌트 props를 전달하여 데이터를 전달할 수도 있습니다. 예를 들어, 아래와 같이 ..

FrontEnd/React 2023. 2. 16. 02:25

😮 Objects are not valid as a React child 에러 발생 원인 "Objects are not valid as a React child" 오류는 일반적으로 React에서 문자열, 숫자 또는 React 구성 요소와 같은 유효한 자식 요소가 아닌 객체를 렌더링하려고 할 때 발생합니다. 이 오류는 일반적으로 다음과 같은 상황에서 발생합니다. 컴포넌트에서 객체를 반환하고 있거나 컴포넌트의 자식 요소 중 하나가 객체입니다. 🙌🏻 해결 방법 해결 방법은 다음과 같습니다. 확인해야 할 첫 번째 사항은 렌더링하는 컴포넌트의 반환 값입니다. 컴포넌트가 객체를 반환하고 있다면 해당 객체를 문자열, 숫자 또는 유효한 자식 요소로 변환해야 합니다. 만약 자식 요소가 객체인 경우 해당 객체를 문자열, ..

FrontEnd/React 2023. 2. 16. 01:51

부모 컴포넌트로부터 전달받은 props의 이름이 자식 컴포넌트의 변수명과 같을 경우, 어떻게 중복을 피하는게 좋을까요? 혹은 부모 컴포넌트로부터 받은 props를 자식 컴포넌트에서 새로운 변수에 할당해서 사용하려고 할 때도 마찬가지로 변수명을 어떻게 지어야할지 고민이 됩니다. 참고 : 전달받은 props와 새로운 변수의 이름이 같을 경우, 코드를 읽기 어렵게 만들 수 있습니다. 이러한 경우, 새로운 변수의 이름을 지을 때 props 이름을 참고하면서, 더 구체적으로 나타낼 수 있는 이름을 사용하는 것이 좋습니다. 💄 변수명 중복을 피하기 위한 규칙 일반적으로, 다음과 같은 규칙을 따르면 좋습니다: props 이름과 유사한 이름을 사용합니다. 예를 들어, props로 전달된 데이터가 “title”인 경우,..

FrontEnd/React 2023. 2. 16. 00:17