React에서 커스텀 훅(Custom Hook)을 작성하면 컴포넌트 간의 로직을 재사용하고 코드를 정리할 수 있습니다. 커스텀 훅은 함수명이 use로 시작하고, 다른 훅을 사용하거나 상태를 관리하는 등의 로직을 포함합니다. 이 글에서는 React 컴포넌트에서 커스텀 훅을 작성하고 활용하는 방법을 알아보겠습니다. 커스텀 훅의 구조 커스텀 훅은 보통 다음과 같은 구조를 가집니다. 커스텀 훅 작성 예제 예제 1: 로컬 스토리지 상태 … Read more
React 애플리케이션을 개발하면서 UI를 스타일링하는 것은 중요한 부분입니다. 그런데 어떻게 스타일링을 할까요? 이 블로그 포스팅에서는 @emotion/styled를 사용하여 React에서 스타일드 컴포넌트를 만들고 사용하는 방법을 알아보겠습니다. @emotion/styled란? @emotion/styled는 CSS-in-JS(JavaScript로 CSS 스타일을 관리) 라이브러리 중 하나로, React 컴포넌트에 스타일을 적용하기 위한 효율적인 방법을 제공합니다. 이를 통해 컴포넌트와 스타일을 한 곳에서 관리하고 유지보수하기 쉽습니다. 단계 1: 프로젝트 설정 먼저 … Read more
부모 컴포넌트와 자식 컴포넌트 사이의 효율적인 통신이 필요한 경우가 있습니다. 이 글에서는 Vue.js에서 자식 컴포넌트의 함수를 호출하는 다양한 방법을 알아보겠습니다. 1. Props를 통한 메서드 전달 Props를 사용하여 부모 컴포넌트에서 메서드를 자식 컴포넌트로 전달하고, 자식 컴포넌트에서 해당 메서드를 호출하는 방법입니다. 이 방식은 Vue의 권장 방법 중 하나이며 컴포넌트 간 통신을 명확하게 합니다. 부모 컴포넌트: 자식 컴포넌트: … Read more