react11 useState 1. 소개 useState는 React에서 제공하는 hook으로 컴포넌트의 상태를 생성하고 업데이트한다. useState – React The library for web and native user interfaces react.dev 2. 사용법 import { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}> 증가 ); ); 사용법은 간단하다 배열로 선언해 주고 첫 번째 인자로 값을 읽고 두 번째 인자로 값을 업데이트한다. 3. Principles for structuring state 상태를 사용할 때 어떻게 상.. 2024. 2. 13. useLocation 1. 소개 useLocation은 React Router에서 제공하는 hook으로 현재 페이지의 URL 정보를 가져올 때 많이 쓰인다. useLocation v6.22.0 | React Router useLocation Type declarationdeclare function useLocation(): Location; interface Location extends Path { state: State; key: string; } interface Path { pathname: string; search: string; hash: string; } This hook returns the current location object. This can reactrouter.com 2. 꿀팁 import * .. 2024. 2. 7. 소개 React Router는 SPA 방식에서 URL에 따라 페이지를 렌더링 해주는 라이브러리다. Feature Overview v6.21.3 | React Router Feature Overview Client Side Routing React Router enables "client side routing". In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When reactrouter.com 설치 npm install react-router-dom ya.. 2024. 1. 31. useEffect 1. 소개 import { useEffect } from 'react'; 리액트 컴포넌트가 렌더링 된 이후에 다양한 함수를 수행할 수 있도록 하는 Hooks이다. DOM 업데이트를 수행한 이후에 호출된다. 2. 실행 useEffect(() => { console.log('useEffect 실행'); return () => { console.log('clean up 실행'); } }, []); useEffect의 인자는 2개가 존재한다. 수행할 콜백 함수 의존성 배열 의존성 배열의 존재 유무, 의존성 배열 안에 변수 유무에 따라 수행하는 방식이 달라진다. return으로 함수를 반환하는 것을 cleanup 함수라고 한다. cleanup 함수는 컴포넌트의 언마운트시 실행된다. return을 안 쓰면 clea.. 2024. 1. 27. 소개 1. React Query React Query는 서버로부터 가져온 데이터의 상태 관리를 도와주는 라이브러리다. 흔히 React Query로 많이 알고 있는데 V4부터 vue, svelte, solid에서도 사용이 가능해지면서 Tanstack Query로 이름을 변경했다. (이후의 글들은 모두 V5에 맞춰 포스팅할 것이다.) Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing an.. 2024. 1. 24. 카카오페이 연동 1. 패키지 설치 $ npm install react-daum-postcode 2. 컴포넌트에 적용 import { useState } from "react"; import DaumPostcode from 'react-daum-postcode'; const Address = () => { const [openPostCode, setOpenPostCode] = useState(false); const onClickSearchAddress = { clickButton: () => { setOpenPostCode(!openPostCode); }, // 주소 선택 이벤트 selectAddress: (data) => { console.log(data.address); // 주소 console.log(data.zo.. 2022. 8. 13. 이전 1 2 다음
