2025/05/11 2

리액트 Context와 useContext 훅이란?

이번에는 리액트에서 전역적으로 데이터를 컴포넌트들에 전달하는 데 사용되는 Context와 useContext에 대해 알아보겠습니다.📑목차1. Context1-1. Context란?1-2. Context의 특징1-3. Context 문법1-4. Provider2. useContext 2-1. useContext 훅이란2-2. useContext를 사용한 예제 코드서론리액트에서 컴포넌트 간 데이터를 전달할 때 가장 일반적인 방법은 props를 사용하는 것입니다. 하지만 컴포넌트 구조가 깊어지고 여러 단계에 걸쳐 같은 데이터를 전달해야 할 경우, props 전달은 번거롭고 코드가 복잡해질 수 있습니다. 이러한 문제를 해결하기 위해 리액트는 Context API를 제공합니다. Context를 사용하면 전역적으..

React 기록 2025.05.11

리액트 커스텀 훅(Custom Hooks)이란?

안녕하세요~ 이번에는 리액트에서 커스텀 훅에 대해 알아보도록 하겠습니다. 커스텀 훅이 무엇이고, 언제 사용되는지, 왜 사용해야하는지 알아야 커스텀 훅을 사용할 수 있겠죠? 함께 알아보시죠~ 📑목차1. 커스텀 훅1-1. 커스텀 훅이란?1-2. 커스텀 훅의 특징1-3. 커스텀 훅을 사용하는 이유1-4. 커스텀 훅의 목적1-5. 커스텀 훅의 동작 원리1-6. 커스텀 훅의 문법서론 리액트를 사용하다 보면 여러 컴포넌트에서 동일한 로직을 반복적으로 작성하게 되는 경우가 많습니다. 이럴 때 코드의 재사용성과 가독성을 높이기 위해 사용하는 것이 바로 "커스텀 훅(Custom Hook)"입니다. 이번 글에서는 커스텀 훅이 무엇인지, 왜 사용해야 하는지, 커스텀 훅이 어떻게 동작하는지 살펴보시죠~본론1. 커스텀 훅1..

React 기록 2025.05.11