Daily log

개발/React : 「25」건

  1. Theme: {theme}
    2026.02.26
  2. React 성능 최적화 기법
    2026.02.26
  3. React Server Components (RSC) 정리
    2026.02.25
  4. React useState vs useReducer 비교
    2026.02.25
  5. React useEffect 완벽 가이드
    2026.02.25
  6. React ‘Invalid Hook Call’ 오류와 상태/데이터 관리 패턴 실무 사례, 원인, 해결
    2025.07.01
  7. React Provider란 무엇인가?
    2025.07.01
  8. React - useQueryClient(). invalidateQueries
    2025.06.08
  9. React - useQuery
    2025.06.08
  10. React - useContext를 사용하기 전과 후의 구조 비교
    2025.06.08
  11. React - useCallback을 활용한 함수 최적화 전략
    2025.06.07
  12. React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교
    2025.06.07
  13. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  14. React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`
    2025.06.05
  15. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05
  16. ♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리 1
    2025.06.03
  17. React - 상태 끌어올리기(State Lifting)
    2025.06.01
  18. React - Hook 사용 규칙과 Custom Hook 예제
    2025.06.01
  19. React - Hooks 1
    2025.06.01
  20. React - useRef
    2025.06.01
  21. React - State로 입력 관리하기
    2025.06.01
  22. React - State와 Props
    2025.06.01
  23. React - State로 상태 관리
    2025.06.01
  24. React - 이벤트 핸들링(Event Handling)
    2025.06.01
  25. React - Props로 데이터 전달하기
    2025.05.31

Theme: {theme}

React Context API와 Redux는 React 애플리케이션에서 상태 관리를 위한 두 가지 주요 방법입니다. 이 글에서는 Context API와 Redux의 특징을 비교 분석하고, 어떤 상황에서 어떤 방법을 선택하는 것이 효율적인지 알아봅니다.왜 상태 관리가 필요할까?React 애플리케이션은 컴포넌트 기반으로 구축되는데, 컴포넌트 간에 데이터를 효율적으로 공유하고 관리하는 것이 중요합니다. 특히 규모가 큰 애플리케이션에서는 여러 컴포넌트가 동일한 데이터에 접근하고 수정해야 하는 경우가 많습니다. 이때 상태 관리가 제대로 이루어지지 않으면, 데이터 흐름이 복잡해지고 예측 불가능해져 애플리케이션의 유지보수가 어려워집니다.① Props Drilling 문제React에서 기본적으로 데이터를 전달하는 방..
개발/React 2026. 2. 26. 09:40

React 성능 최적화 기법

React 애플리케이션 성능을 끌어올리는 다양한 방법들을 살펴보고, 실제 적용 사례를 통해 꿀팁을 얻어보자!왜 React 성능 최적화가 중요할까?React는 정말 강력한 프론트엔드 라이브러리인데요, 사용하기도 쉽고 컴포넌트 기반이라 개발 생산성도 높여주죠. 하지만 프로젝트 규모가 커지거나 복잡한 UI를 다루게 되면 성능 문제가 발목을 잡을 때가 있더라고요. 사용자 경험(UX)은 당연히 떨어지고, 심하면 앱이 멈추는 현상까지 발생할 수 있어요.① 느린 렌더링, 답답한 사용자 경험React는 기본적으로 가상 DOM을 사용해서 DOM 업데이트를 효율적으로 처리하지만, 모든 컴포넌트가 불필요하게 리렌더링되면 성능 저하가 발생할 수 있어요. 예를 들어, 부모 컴포넌트의 state가 변경되면 자식 컴포넌트까지 모두..
개발/React 2026. 2. 26. 09:02

React Server Components (RSC) 정리

React Server Components (RSC)에서 발견된 인증 없는 원격 코드 실행 취약점과 관련된 내용, 그리고 이 취약점을 악용한 봇넷 캠페인 확산 소식을 알아보고, 개발자가 주의해야 할 점들을 살펴봅니다.React Server Components (RSC)란 무엇일까요?React Server Components(RSC)는 React 애플리케이션 개발 방식을 혁신적으로 변화시키는 기술인데요. 기존 React 컴포넌트가 클라이언트 사이드에서 렌더링되는 것과 달리, RSC는 서버에서 렌더링됩니다. 이를 통해 초기 로딩 속도를 개선하고, 클라이언트 측 JavaScript 번들 크기를 줄여 사용자 경험을 향상시킬 수 있다고 알려져 있어요.RSC 취약점: 인증 없는 원격 코드 실행 (RCE)① 문제 발..
개발/React 2026. 2. 25. 11:53

React useState vs useReducer 비교

React에서 상태 관리를 위한 두 가지 주요 Hook인 useState와 useReducer를 비교하고, 어떤 상황에서 어떤 Hook을 사용하는 것이 더 효과적인지 알아봅니다.왜 상태 관리가 중요할까?React 애플리케이션에서 상태 관리는 핵심적인 부분인데요. 사용자 인터페이스는 상태 변화에 따라 끊임없이 업데이트되기 때문이죠. React는 컴포넌트의 상태를 관리하기 위한 다양한 방법을 제공하는데, 그중 가장 기본적이면서도 중요한 두 가지가 바로 useState와 useReducer입니다. 간단한 상태 관리는 useState로 충분하지만, 복잡한 상태 로직이나 여러 하위 값들을 관리해야 할 때는 useReducer가 더 나은 선택이 될 수 있어요.① useState: 간단한 상태 관리를 위한 Hooku..
개발/React 2026. 2. 25. 11:11

React useEffect 완벽 가이드

React useEffect 훅을 사용하여 컴포넌트가 렌더링된 후 side effect를 관리하는 방법을 알아봅니다. 의존성 배열을 활용한 최적화, cleanup 함수를 통한 메모리 누수 방지 등 useEffect를 완벽하게 사용하는 방법을 살펴봅니다.왜 useEffect가 필요할까요?React 컴포넌트는 기본적으로 UI를 렌더링하는 역할을 합니다. 하지만 때로는 컴포넌트가 렌더링된 후에 특정 작업을 수행해야 할 때가 있습니다. 이러한 작업을 "side effect"라고 부르는데요. 예를 들어, API를 호출해서 데이터를 가져오거나, DOM을 직접 조작하거나, 타이머를 설정하는 것들이 side effect에 해당합니다.① 문제 상황: 컴포넌트 렌더링 후 데이터 가져오기만약 컴포넌트가 렌더링될 때 API를..
개발/React 2026. 2. 25. 10:26

React ‘Invalid Hook Call’ 오류와 상태/데이터 관리 패턴 실무 사례, 원인, 해결

1. 문제 상황(1) 실제로 발생한 오류 메시지(원문/해석)Warning: React has detected a change in the order of Hooks called by MaintenanceTable. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks해석:React가 MaintenanceTable 컴포넌트에서 Hook 호출 순서가 바뀌는 것을 감지했습니다. 이 문제를 수정하지 않으면 버그와 오류가 발생할 수 있습니다. 자세한 내용은 Rules of Hooks 문서를 참고하세요.Uncaught Error:..
개발/React 2025. 7. 1. 16:39

React Provider란 무엇인가?

1. Provider란?Provider는 React의 Context API에서 "공급자(Provider)" 역할을 하는 컴포넌트입니다.하위 컴포넌트 트리에 값을 공급(Provide)하는 역할을 합니다.코드 예시: 이렇게 Provider로 감싼 자식 컴포넌트들은 useContext(MyContext)를 통해 바로 값을 사용할 수 있습니다.2. 왜 써야 할까?(1) props drilling 방지원래 React는 부모 → 자식으로 props를 넘겨야만 데이터가 전달됩니다.컴포넌트 트리가 깊어지면, 매번 중간중간 props로 넘기는 것이 번거롭고, 코드가 복잡해집니다.Context + Provider를 사용하면, 중간 단계를 거치지 않고 원하는 하위 컴포넌트 어디에서나 값을 꺼내 쓸 수 있습니다.(2) 전역..
개발/React 2025. 7. 1. 12:41

React - useQueryClient(). invalidateQueries

🧼 queryClient.invalidateQueries란?React Query의 queryClient.invalidateQueries()는 특정 queryKey에 해당하는 캐시를 무효화하여 useQuery가 자동으로 다시 데이터를 fetch 하게 만드는 함수입니다.const queryClient = useQueryClient()queryClient.invalidateQueries({ queryKey: ["commCodeList"] })🚀 효과해당 queryKey를 사용하는 모든 useQuery가 자동으로 재실행됨서버에서 최신 데이터를 다시 가져오게 됨로딩 스피너 표시, 캐시 업데이트 자동 처리🎯 주요 옵션queryKey: 어떤 쿼리를 무효화할지 지정 (배열 형태)exact: 정확히 일치하는 키만 ..
개발/React 2025. 6. 8. 17:29

React - useQuery

useQuery는 React Query에서 데이터를 서버에서 비동기적으로 가져올 때 사용하는 가장 기본적인 훅입니다.const { data, isLoading, error } = useQuery({ queryKey: ["users"], queryFn: fetchUsers,})주요 속성queryKey:해당 쿼리의 고유 키입니다. 캐싱, 리페칭 등에 활용됨배열 형태로 작성하며, 서버에 요청을 보낼 조건을 포함할 수 있음queryFn:실제 서버에서 데이터를 가져오는 함수 (예: axios.get(...))비동기 함수 형태로 작성됨data:쿼리의 결과 데이터isLoading:데이터를 가져오는 중인지 여부 (boolean)error:에러 발생 시 객체 반환refetch:수동으로 다시 조회할 때 사용예시: 공통..
개발/React 2025. 6. 8. 17:27

React - useContext를 사용하기 전과 후의 구조 비교

React에서 여러 컴포넌트가 동일한 데이터를 공유하고 조작해야 할 경우, props를 깊게 전달하는 방식은 유지보수가 어렵고 구조가 복잡해지기 쉽다. 이럴 때 useContext를 사용하면, 전역적으로 데이터를 관리할 수 있어 코드가 훨씬 깔끔해진다. 아래에서는 useContext 적용 전후의 차이점을 코드와 함께 비교해 보자.1. useContext를 사용하지 않았을 때의 구조✅ 특징App 컴포넌트에서 todos, onCreate, onUpdate, onDelete를 정의하고 props로 하위 컴포넌트에 전달한다.List, Editor, TodoItem 등 모든 하위 컴포넌트는 이 props를 계속해서 받아야 하며, 구조가 깊어질수록 관리가 어려워진다.TodoItem에서도 마찬가지로 onUpdate,..
개발/React 2025. 6. 8. 00:17

React - useCallback을 활용한 함수 최적화 전략

React 컴포넌트에서 함수를 props로 자식 컴포넌트에 전달하는 경우, 불필요한 함수 재생성으로 인해 자식 컴포넌트가 매번 리렌더링되는 문제가 발생할 수 있다. 특히 React.memo와 함께 사용할 때 이 문제가 더욱 두드러진다. 이를 방지하고 성능을 개선하기 위해 useCallback을 활용한 최적화가 필요하다.이번 글에서는 useCallback을 적용해 함수 재생성을 방지하고 렌더링 최적화를 이룬 사례를 소개한다.문제 상황아래와 같이 작성된 코드에서, onCreate, onUpdate, onDelete 함수는 컴포넌트가 렌더링될 때마다 새로 정의된다.const onCreate = (content) => { dispatch({ type: "CREATE", data: { ... }, ..
개발/React 2025. 6. 7. 01:12

React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교

React에서 연산 비용이 크거나 불필요하게 반복될 수 있는 계산은 useMemo를 통해 최적화할 수 있다. 이 글에서는 useMemo를 사용한 코드와 사용하지 않은 코드를 직접 비교하면서 어떤 차이가 있는지 명확하게 설명한다.예제 시나리오: 완료된 작업 수 계산하기🔸 useMemo를 사용하지 않은 경우function TodoStats({ todos }) { const doneCount = todos.filter((todo) => todo.isDone).length; console.log("✅ 계산됨"); return 완료된 항목: {doneCount};}이 코드는 todos 외의 다른 상태 변경이 있어도, 예를 들어 검색어 입력 등으로 렌더링이 발생하면 doneCount 계산이 매번 실행된다.?..
개발/React 2025. 6. 7. 00:20

React - useState를 useReducer로 대체하는 간단 예제

상태가 단순할 땐 useState를 쓰는 것이 편하지만, 복잡해질 경우 useReducer가 더 깔끔하고 명확한 코드를 만들어 줍니다. 이 글에서는 간단한 카운터 예제를 통해 useState와 useReducer의 차이를 비교해보겠습니다.✅ useState 버전import { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}>+1 );}export default Counter;useState를 사용해 상태(count)를 관리합니다.setCount를 통해 직접 상태를 변경합니다.✅ useReducer ..
개발/React 2025. 6. 5. 16:16

React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`

React로 컴포넌트를 작성하다 보면 자식 컴포넌트에 props를 전달할 때 todo={todo}처럼 객체 전체를 넘기는 방식과 {...todo}처럼 전개 연산자(spread)를 사용하는 방식이 있습니다.이 두 방식은 비슷해 보이지만, 컴포넌트 내부에서 데이터를 접근하는 방법이 완전히 달라집니다.잘못 사용하면 undefined 에러가 발생할 수 있으므로, 각각의 차이와 올바른 사용법을 명확히 이해하는 것이 중요합니다.✅ 예제 상황 설명예를 들어 List라는 컴포넌트가 있고, 그 안에서 TodoItem 컴포넌트를 반복적으로 렌더링한다고 가정합니다.{todos.map((todo) => ( ))}위 코드에서 ...todo는 todo 객체를 전개해서 각각의 속성을 TodoItem에 개별적으로 전달하는 방식입니..
개발/React 2025. 6. 5. 15:31

React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리

React의 useEffect 훅은 컴포넌트의 마운트(Mount), 업데이트(Update), 언마운트(Unmount) 시점을 제어할 수 있게 해주는 핵심 도구입니다. 아래는 예제 코드를 기준으로 useEffect의 동작 방식을 정리한 문서입니다.🔹 1. Mount (마운트)컴포넌트가 처음으로 렌더링될 때 실행됨의존성 배열(deps)이 빈 배열인 경우 한 번만 실행됨useEffect(() => { console.log("mount");}, []); // 최초 1회만 실행💡 특징이후 다시 렌더링되어도 실행되지 않음서버에서 데이터를 처음 가져오거나 초기 설정 시 사용🔹 2. Update (업데이트)컴포넌트가 리렌더링될 때마다 실행됨의존성 배열이 없을 경우 매 렌더링마다 실행특정 값이 변경될 때만 실행하..
개발/React 2025. 6. 5. 00:53

♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리

리액트 컴포넌트는 마치 살아있는 존재처럼 생명 주기(Lifecycle)를 갖는다. 컴포넌트가 생성되어 화면에 표시되고(탄생), 상태 변화에 따라 업데이트되며(변화), 마지막으로 화면에서 사라지는(소멸) 일련의 과정을 거친다. 이 흐름을 이해하는 것은 리액트 개발의 기본이자 핵심이다.과거에는 클래스형 컴포넌트에서 명시적인 생명 주기 메서드를 사용했지만, 현재는 함수형 컴포넌트와 useEffect Hook을 통해 이를 더 간결하고 유연하게 다룬다.1. 클래스형 컴포넌트의 생명 주기클래스형 컴포넌트는 각 단계별로 특정 메서드가 순차적으로 호출된다. 주요 단계는 다음과 같다.Mounting (마운팅) - 컴포넌트의 탄생컴포넌트가 처음 생성되어 DOM에 삽입될 때 발생한다.constructor()컴포넌트 생성자...
개발/React 2025. 6. 3. 23:38

React - 상태 끌어올리기(State Lifting)

React를 사용하다 보면 컴포넌트 간에 같은 데이터를 공유해야 할 때가 있다. 이럴 때 사용하는 패턴이 바로 상태 끌어올리기(state lifting)다. 이 글에서는 상태 끌어올리기의 개념부터 예제, 사용하는 이유까지 단계별로 정리해본다.상태 끌어올리기란?여러 컴포넌트가 같은 상태를 공유해야 할 때, 해당 상태를 공통 부모 컴포넌트로 올리는 것을 상태 끌어올리기라고 한다.React는 데이터가 항상 위에서 아래(부모 → 자식) 방향으로 흐르기 때문에, 형제 컴포넌트끼리 데이터를 공유하려면 부모 컴포넌트를 통해야 한다.왜 상태를 끌어올려야 할까?형제 컴포넌트가 서로 다른 상태를 가지면 데이터가 불일치할 수 있다. 이 경우 공통 부모가 상태를 관리하고 자식에게 props로 내려주는 방식이 가장 깔끔하다.예..
개발/React 2025. 6. 1. 18:47

React - Hook 사용 규칙과 Custom Hook 예제

React에서 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있도록 도와준다. 하지만 사용 시 몇 가지 중요한 규칙을 반드시 지켜야 한다. 아래는 흔히 발생하는 오류와 함께 기본 규칙, 그리고 Custom Hook을 활용한 코드 리팩토링 예제를 정리한 것이다.React Hook 사용 시 반드시 지켜야 할 규칙1. 함수 컴포넌트 또는 Custom Hook 내부에서만 호출해야 함Hooks는 컴포넌트 함수의 최상위에서만 호출해야 하며, 함수 외부에서 직접 호출하면 에러가 발생한다.❌ 잘못된 예시:import { useState } from "react";const [state, setState] = useState(); // ❌ 컴포넌트 함수 바깥에서 사용const HookExam =..
개발/React 2025. 6. 1. 15:55

React - Hooks

React Hooks 개념 정리React Hooks는 리액트 함수형 컴포넌트에서 "상태 관리"나 "라이프사이클 효과" 같은 기능을 사용할 수 있게 해주는 함수들이다. 이전에는 클래스 컴포넌트에서만 가능했지만, Hooks 덕분에 함수형 컴포넌트로도 모든 기능을 구현할 수 있다.1. useState컴포넌트 내부에서 상태를 관리할 수 있게 해주는 Hook이다.const [count, setCount] = useState(0);count: 상태값setCount: 상태 변경 함수useState(0): 초기값 0예: 버튼 클릭할 때 숫자 증가시키기function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}..
개발/React 2025. 6. 1. 14:35

React - useRef

useRef→ 새로운 Reference 객체를 생성하는 기능const refObject= useRef();useRef vs useState항목useRefuseState✅ 주요 용도DOM 접근, 리렌더링 없는 상태 보관상태 저장 및 UI 리렌더링 트리거🔄 값 변경 시 리렌더링❌ 리렌더링 발생하지 않음✅ 값 변경 시 컴포넌트 리렌더링🧠 저장되는 값.current 프로퍼티 내부에 저장내부적으로 저장, 렌더링 간 값을 유지함⏱ 초기화 타이밍컴포넌트 마운트 시 한 번마찬가지로 첫 렌더링 시 한 번💥 비동기 동작 영향영향 없음 (값 즉시 반영 가능)렌더링에 따라 비동기 업데이트 가능성 있음📦 예시 코드const ref = useRef(null)const [count, setCount] = useState(0..
개발/React 2025. 6. 1. 14:05

React - State로 입력 관리하기

input, select, textarea 등 입력 엘리먼트들을 아래와 같이 상태관리 한다고 했을 때 더 효율적으로 관리할 수 있도록 개선Register.jsx개선 전// 간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개import { useState } from "react";const Register = () => { const [name, setName] = useState("이름"); // 초기값: 이름 const [birth, setBirth] = useState(""); // 초기값: const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const [input, ..
개발/React 2025. 6. 1. 13:05

React - State와 Props

컴포넌트가 리렌더링 되는 경우는 크게 세가지가 있다.state가 변경될 경우props가 변경될 경우부모 컴포넌트가 변경될 경우 만약 코드가 아래와 같이 있다고 가정했을 때, setLight나 setCount로 state가 변경될 경우 Bulb 컴포넌트도 같이 리렌더링 된다.import "./App.css";import { useState } from "react";const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setCount] = useState(0); const [light, set..
개발/React 2025. 6. 1. 10:34

React - State로 상태 관리

리 렌더(Re-Render), 리 렌더링(Re-Rendering)→ 컴포넌트의 상태 변화가 바뀐걸 감지해서 자동으로 이 컴포넌트를 다시 렌더링해서 UI를 변경해주는 상황 컴포넌트의 상태를 의미하고 변화할 수 있는 값인 State를 만들 수 있으며, 아래와 같이 하나의 컴포넌트에 여러개의 상태를 생성하고 관리할 수 있다. useState→ React가 제공하는 내장 함수를 사용하기 위해 import를 해야한다.→ Return0상태값1상태변화함수const state = useState(0); → 비구조화 할당 문법을 이용해서 반환을 받는 것이 일반적이다.const [state, setState] = useState(0); 실습App.jsximport "./App.css";import { useState ..
개발/React 2025. 6. 1. 09:09

React - 이벤트 핸들링(Event Handling)

Event Handling→ 이벤트가 발생했을 때 그것을 처리하는 것→ 버튼 클릭시 경고창 노출과 같은 동작const Button = ({ children, text, color = "black" }) => { // 이벤트 객체 e const onCLickButton = (e) => { console.log(e); //SyntheticBaseEvent: 합성 이벤트 객체 console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};export default Button; SyntheticBaseEvent → 합성 이벤트 객체→ 크롬, 사파리, 웨일 등 서로 다른 브라우저의 규격..
개발/React 2025. 6. 1. 08:48

React - Props로 데이터 전달하기

App.jsximport "./App.css";import Header from "./components/Header";import Button from "./components/Button";function App() { const buttonProps = { text: "메일", color: "red", a: 1, b: 2, c: 3, }; return ( 자식 요소 );}export default App;Button.jsxconst Button = ({ children, text, color = "black" }) => { return ( {text} - {colo..
개발/React 2025. 5. 31. 12:31
◀ 1 ▶

티스토리툴바