Daily log

개발/React : 「18」건

  1. React - useQueryClient(). invalidateQueries
    2025.06.08
  2. React - useQuery
    2025.06.08
  3. React - useContext를 사용하기 전과 후의 구조 비교
    2025.06.08
  4. React - useCallback을 활용한 함수 최적화 전략
    2025.06.07
  5. React - useMemo를 사용한 코드 vs 사용하지 않은 코드 비교
    2025.06.07
  6. React - useState를 useReducer로 대체하는 간단 예제
    2025.06.05
  7. React - props 전달 방식의 차이: `{...todo}` vs `todo={todo}`
    2025.06.05
  8. React - useEffect를 이용한 컴포넌트 라이프사이클 제어 정리 1
    2025.06.05
  9. ♻️ 리액트 컴포넌트 생명 주기(Lifecycle) 핵심 정리
    2025.06.03
  10. React - 상태 끌어올리기(State Lifting)
    2025.06.01
  11. React - Hook 사용 규칙과 Custom Hook 예제
    2025.06.01
  12. React - Hooks 1
    2025.06.01
  13. React - useRef
    2025.06.01
  14. React - State로 입력 관리하기
    2025.06.01
  15. React - State와 Props
    2025.06.01
  16. React - State로 상태 관리
    2025.06.01
  17. React - 이벤트 핸들링(Event Handling)
    2025.06.01
  18. React - Props로 데이터 전달하기
    2025.05.31

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 ▶

티스토리툴바