wwxs 님의 블로그

AxiosJS에서 HTTP 요청을 실행하기 위한 라이브러리Promise 기반 HTTP 클라이언트, 브라우저와 node.js 모두 사용 가능HTTP 통신HTTP(HyperText Transfer Protocol)웹에서 데이터를 교환하는 주요 프로토콜클라이언트(브라우저)와 서버 간의 통신을 위해 사용 요청(Request)과 응답(Response)의 형태로 데이터가 교환 HTTP 요청 방법HTTP 프로토콜은 다양한 요청 메서드를 지원1) GET데이터를 조회할 때 사용URL에 쿼리 파라미터를 포함하여 요청을 보냄데이터를 조회하고 검색하는 데 사용2) POST새로운 데이터를 생성할 때 사용데이터를 요청 본문(body)에 포함시켜 전송새 리소스를 생성하거나 데이터를 서버로 제출할 때 사용3) PUT기존 데이터를 수..

UseNavigateReact Router에서 제공하는 Hook사용자를 다른 페이지로 이동시킬 때 사용 Link와 컴포넌트 차이이벤트 핸들러나 비동기 작업 내에서의 특정 경로 이동이 가능더보기더보기export default function UseNavigate01() { //# useNaivgate() 사용 방법 const navigate = useNavigate(); // >> '네비게이트' 라는 이름으로 호출 // >> 원하는 경로를 문자열 인수로 전달하여 이동 //? useNavigate 훅의 옵션 // - state 옵션 // : 네비게이션(경로)과 함께 상태 전달이 가능 // >> 해당 상태는 useLocation을 통해 접근 가능 //? 조건부 네비게이션 // >> 조건에 따..

리액트 라우터 사용 방법1. 설치npm install react-router-dom2. 프로젝트 설정(typescript)tsconfig.json 파일에 설정 추가더보기더보기{ "compilerOptions": { "jsx": "react-jsx" } } 3. index.tsx 파일에 리액트 라우터 설정 추가전체 프로젝트에서 라우팅 기능을 사용함을 명시 컴포넌트로 전체 컴포넌트()를 감싸기 라우터 사용 방법Route 컴포넌트에 path='경로' element={} 속성을 사용여러 개의 Route를 하나의 컴포넌트에 적용 하는 경우 → Routes 컴포넌트로 반드시 묶어서 사용더보기더보기export default function Index() { return ( 리액터 라우터..

Custom Hook (커스텀 훅)리액트의 기본 Hook을 사용하여 작성되는 재사용 가능한 로직의 모음useState, useEffect, useRef 등Custom Hook 생성 방법use로 시작하는 함수 정의 해당 함수 내부에서 다른 Hook을 호출결과와 기능을 반환더보기export default function Custom01() { const {count, increment, decrement, reset} = useCounter(0) return ( {count} 증가 감소 리셋 )} (예제 코드)더보기import React from "react";import { useInput } from "./useInput";export defau..

useReducer useState VS useReducer 1) useStateconst [state, setState] = useState(initialValue);리액트에서 가장 기본적인 상태 관리 Hook2) useReducerconst [state, dispatch] = useReducer(reducer, initialValue)복잡한 상태 로직을 관리하는데 useState보다 적합상태 업데이트 로직을 외부에서 선언 가능  (재사용성 용이) useReducer의 기본 구조reducer 함수useReducer에 인자로 전달되는 함수상태 변경 로직을 포함(switch, case)하고 이전 상태와 액션 객체를 인자로 받아 새로운 상태를 반환initialValue리듀서의 초기 상태를 정의 (상태의 초기..

useCallback특정 콜백함수가 의존성 배열에 명시된 값들이 변경되지 않는 한 동일한 함수 인스턴스를 유지하도록 해주는 훅주로 자식 컴포넌트에 함수를 전달할 때 사용더보기//# 자식 컴포넌트const Button = React.memo(({handleClick} : {handleClick: () => void}) => { console.log(`버튼이 렌더링 되었습니다.`); return 클릭});//# 부모 컴포넌트export default function UseCallback() { const [count, setCount] = useState(0); const [text, setText] = useState(""); // 부모 컴포넌트에서 정의한 이벤트 핸들러 // : useCallb..

useEffectReact 함수형 컴포넌트에서 부수 효과를 수행하기 위한 Hook(기능)데이터 가져오기: API 호출 등 비동기 작업을 수행하여 데이터를 가져옴구독 설정: 이벤트 리스너나 WebSocket 등의 구독을 설정이벤트 등록: DOM 요소에 이벤트를 등록하여 사용자 상호작용을 처리컴포넌트 렌더링: 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정 부수 효과컴포넌트의 주요기능(상태 관리, UI 렌더링) 외에 발생하는 작업을 의미                                                                      ex) API 호출, 이벤트 리스너 등록, 수동 DOM 조작API 호출: 외부 서버에서 데이터를 가져오는 작업이벤트 리스너 등록: 버튼 클릭, ..

useRef: use + Reference(참조)변경 가능한 참조 객체를 생성할 수 있는 기능(훅)사용 목적DOM 요소에 직접적으로 접근하고 조작컴포넌트가 재렌더링될 때도 값이 유지되는 변수 관리이전 상태를 기억 (렌더링 사이에 지속되는 값을 유지)기본 문법const refContainer = useRef(initialValue)initialValue: 참조 객체의 초기값refContainer.current: 저장된 현재 값에 접근추가내용더보기 useRef는 객체를 반환해당 객체에는 current라는 속성이 존재컴포넌트의 재렌더링에도 값이 유지(예제 코드)더보기export default function UseRef01() { const [text, setText] = useState(''); cons..

Hooks리액트 '함수형 컴포넌트'  에서 사용할 수 있는 기능useStateReact에서 제공하는 Hook 중 하나함수형 컴포넌트 내에서 상태를 관리 하는 기능호출 시 변화되는 상태값과 해당 상태값을 업데이트 하는 함수를 제공호출 시 상태 업데이트 함수는 비동기적 처리가 기본으로 진행상태 변경 시 컴포넌트의 재 렌더링을 유발기본 구문const [state, setState] = useState(initialValue);state: 현재의 상태값(변수)setState: 상태를 업데이트 하는 함수initialValue: 상태의 초기값더보기const [count, setCount] = useState(0);const handelUpclick = () => { // 1) 상태 설정 함수를 그대로 사용 ..

Handler사용자와의 상호작용을 처리하기 위한 함수UI(사용자 인터페이스)에서 발생하는 이벤트에 반응하여 동작되는 기능을 정의더보기interface ConsoleProps { message: string; children: React.ReactNode; // HTML 요소 + 사용자 정의 컴포넌트}// 자식 컴포넌트// >> 부모 컴포넌트에서 속성으로 문자열 message의 값과// 해당 컴포넌트 태그들 사이에 내용을 전달받음function ConsoleButton({ message, children }: ConsoleProps) { return ( { console.log(`${message}`); }} > {children} );}exp..