리액트 (48) 썸네일형 리스트형 [react] 리액트에서 카카오 맵 사용하기( with ReactKakaoMapSDK) 이 방식의 단점은 document.write 를 사용하고 있고, 크로스 사이트 문제로 인해 sdk 스크립트 사용이 불안정하다는 점이 있다. Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs Description will go into a meta tag in react-kakao-maps-sdk.jaeseokim.dev ReactKakaoMapSDK 란? kakao map 을 리액트 환경에 맞게 컴포넌트화 시킨 것이라 보면 된다. 국내 개발자가 만든 것으로 보이고, 카카오 맵의 경우 타입 정의를 지원하지 않는데, 이에 대한 타입 정의를 만들어서 제공하고 있는 점이 눈에 띈다. 단, 아직 미완성이라서 모든 타입을 다 지원해주는 것은 아니다... [react hooks] 3. useContext 에 대한 정리 useContext 와 사용 시 주의사항 리액트에서 부모 컴포넌트에서 하위 컴포넌트(자식 컴포넌트)로 데이터를 전달할 때는 props 라는 속성을 인자로 넘겨주어 해당 자식 컴포넌트 내에서 매개변수로 받아와 사용하게 된다. 이러한 방식은 데이터를 명시적으로 연결하는 데 있어서 아주 좋은 방법이지만, 부모 컴포넌트에서 리프 컴포넌트에 도달하는 파이프라인이 길고 복잡할 수록 props 를 사용한 전달 방식은 한계에 봉착할 수 있다. useContext 는 이러한 문제를 해결할 수 있도록 데이터를 전역적으로 관리할 수 있도록 해준다. 단, 주의할 점은 useContext 는 프로바이더(제공자)를 통해 전달된 값이 존재하는 컴포넌트를 값이 변동될 때 마다 리렌더링한다는 점이다. 따라서 무턱대고 useContex.. [react-router-dom] useSearchParams () 에 대한 정리 useSearchParams() 현재 위치의 쿼리 매개변수(쿼리 문자열)에 대한 데이터를 읽고 수정하는데 사용하는 리액트 라우터 돔 라이브러리에서 제공하는 훅이다. 참고) 쿼리 문자열과 쿼리 매개변수를 혼용해서 사용하고 있는데, 둘 다 같은 말이다. 사용예시 리액트의 useState 훅과 유사하게 두 개의 변수를 제공하는데, 하나는 쿼리 매개변수의 데이터가 담겨 있는 searchParams 변수이고, 두 번째는 쿼리 매개변수를 개발자 혹은 사용자가 직접 지정할 수 있는 setSearchParams 함수를 제공한다. searchParams 변수에는 현재 쿼리 문자열이 {key : value} 형식으로 저장되어 있으며 get 메서드에 '키'를 전달하면 해당 키의 value을 읽어서 출력해준다. import .. [react hooks] 2. useMemo() useMemo() 리액트의 useMemo는 함수 컴포넌트 내에서 계산 결과를 메모이제이션하는 훅이다. 메모이제이션은 이전에 계산된 결과를 저장해 두었다가 동일한 입력에 대해 다시 계산하지 않고 저장된 결과를 반환함으로써 성능을 최적화하는 기술이다. useMemo를 사용하면 특정 계산이 매번 다시 수행되지 않고 캐시된 결과를 사용할 수 있다. 다음은 useMemo를 사용한 예시 코드이다. import React, { useMemo} from 'react'; const MyComponent =() =>{ // 복잡한 계산 로직을 가정해봅시다. const expensiveCalculation =(a, b) =>{ console.log('계산 중...'); // 여기서 실제로 계산을 수행하는 로직이 들어갑니다... [리액트] 키보드 방향키로 페이지 이동하는 기능에 쓰일 코드 저장 아래 코드에서 useEffect 훅을 사용하여 window 객체에 키보드 이벤트 리스너를 등록합니다. 이벤트 처리 함수 handleKeyDown에서는 ArrowRight와 ArrowLeft 키를 처리하는 예시 코드를 작성하였습니다. useEffect 훅의 cleanup 함수에서는 등록한 이벤트 리스너를 제거토록 합니다. 이렇게 함으로써 컴포넌트가 unmount될 때 이벤트 리스너가 자동으로 제거되어 메모리 누수를 방지할 수 있습니다. import { useEffect } from 'react'; function MyComponent() { useEffect(() => { const handleKeyDown = (e) => { // 키보드 이벤트 처리 if (e.key === 'ArrowRight') { .. [react 부트스트랩] 프로그래스 바 사용 설정 참고용 React에서 부트스트랩 프로그래스바를 사용하는 방법은 다음과 같습니다. 1. 설치 먼저 Bootstrap을 설치합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다: npm install react-bootstrap bootstrap 2. Bootstrap CSS import 사용하고자 하는 React 컴포넌트에서 Bootstrap CSS를 가져옵니다. 다음과 같은 코드를 작성합니다: import 'bootstrap/dist/css/bootstrap.min.css'; 3. 컴포넌트를 표시하고자 하는 영역에 사용 Bootstrap 프로그래스바 컴포넌트를 사용하여 프로그래스바를 만듭니다. 다음과 같은 코드를 작성합니다: import React from 'react'; import 'b.. [react] 단순 자동 슬라이드 코드 정리 import { useState, useEffect } from 'react'; function AutoSlide({ images, intervalTime }) { const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCurrentIndex((currentIndex + 1) % images.length); }, intervalTime); return () => clearInterval(intervalId); }, [currentIndex, images.length, intervalTime]); return ( ); } 위 코드에 대해 설명하자면, useSta.. [react] onLoad(), 이미지가 서버로 부터 받아와 졌는지 확인 후 분기 처리 이미지가 성공적으로 로드되면 onLoad 이벤트 핸들러를 호출하여 isImageLoaded 값을 true로 업데이트합니다. 그리고 isImageLoaded 값에 따라 해당 상태를 표시하는 조건부 렌더링을 수행합니다. 따라서, 이 코드에서는 이미지가 로드되면 "Image loaded successfully!"라는 메시지가 나타나고, 그렇지 않은 경우, "Image is still loading..." 메시지가 표시됩니다. import React, { useState } from 'react'; function Component() { const [isImageLoaded, setIsImageLoaded] = useState(false); const handleImageLoad = () => { setIsI.. 이전 1 2 3 4 5 6 다음
