리액트 (44) 썸네일형 리스트형 [리액트] 키보드 방향키로 페이지 이동하는 기능에 쓰일 코드 저장 아래 코드에서 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. useState useState useState는 React의 내장 hook 함수 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 배열을 반환하며 첫 번째 요소는 현재 상태값을, 두 번째 요소는 상태를 갱신하는 함수를 포함합니다. 보통 리액트에서 상태관리라고 하면 제일 먼저 떠오르는게 useState 를 이용한 기본적인 상태관리 방식이라고 볼 수 있습니다. 예를 들어, 간단한 숫자를 더하는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 useState를 사용하여 현재 상태값을 저장하고, 버튼을 클릭할 때마다 상태값을 갱신하고 화면에 출력합니다. import { useState } from 'react'; function Counter() { const [count, setCount] .. [리액트] 리액트에서 DOM에 대한 직접 접근을 권장하지 않는 이유와 Ref 훅을 통한 DOM 접근 리액트는 가상DOM을 이용하여 변경된 부분만 렌더링을 시도합니다. 리액트에서 DOM에 직접 접근하는 것은 권장되지 않습니다. 이는 리액트의 핵심 원칙 중 하나인 가상 DOM(Virtual DOM)의 개념과 관련이 있습니다. 리액트는 가상 DOM을 사용하여 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 화면을 다시 그리지 않고, 변경된 부분만 감지하여 최소한의 렌더링을 수행합니다. 이를 통해 빠른 성능과 원활한 사용자 경험을 제공합니다. 그러나 DOM에 직접 접근하게 되면, 가상 DOM을 우회하여 실제 DOM에 직접 변경을 가하게 됩니다. 이는 리액트의 성능 최적화를 무력화시키고, 예상치 못한 결과를 초래할 수 있습니다. 따라서, 리액트에서는 state나 props를 변경하는 방법을 제공.. [ReactJS] React.lazy() API ; 필요한 컴포넌트만 동적 로드하는 API React.lazy()는 코드 스플릿팅과 함께 사용하여 필요한 컴포넌트만 동적으로 로드할 수 있도록 하는 React API입니다. 이를 사용하면 초기 로드 시간을 단축하고 애플리케이션의 성능을 향상시킬 수 있습니다. 다음은 React.lazy()의 예시입니다. import React, { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( // 가 렌더링 되기 전에 Loading... 을 화면에 보여줍니다. ); } export default App; 위 예시에서는 App 컴포넌트에서 LazyComponent를 동적으로 로드하고 있습니다. 이를 위.. [react type] React.FC React.FC React.FC는 TypeScript를 사용하여 React 함수 컴포넌트를 정의하는 데 사용되는 제네릭 인터페이스입니다. FC는 "Function Component"의 줄임말입니다. React.FC를 사용하면 함수 컴포넌트의 props에 대한 타입 선언이 더욱 간편해집니다. 예를 들어, 다음과 같이 사용할 수 있습니다. import React from 'react'; interface Props { name: string; age: number; } //React.FC를 사용하면 return 으로 어떤 값(ReactNode)이든 반환할 수 있습니다. const MyComponent: React.FC = ({ name, age }) => { return ( Name: {name} Age: .. 이전 1 2 3 4 5 6 다음