fullstack-study

useEffect, useLayoutEffect, useReducer , useMemo, useCallback   1. useEffect useEffect는 컴포넌트가 렌더링 된 후 비동기적으로 실행됩니다. 브라우저가 화면을 업데이트한 후에 실행되므로, 레이아웃 계산이나 DOM 조작보다는 데이터 가져오기, 구독 설정, 타이머 설정 등에 적합합니다. 2. useLayoutEffectuseLayoutEffect는 컴포넌트가 렌더링 된 후, 브라우저가 화면을 업데이트하기 전에 동기적으로 실행됩니다. 따라서 레이아웃 계산, DOM 측정 또는 동기적인 DOM 조작이 필요한 경우에 적합합니다. 실행 시점:useEffect: 컴포넌트가 렌더링되고 화면이 업데이트된 후 비동기적으로 실행됩니다.useLayoutEffec..

React Swiper 1. 설치 npm i swiper 2. // Import Swiper React componentsimport { Swiper, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swiper/css';export default () => { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... );};  https://swiperjs.com/demos Swiper DemosSwiper..

useRef 1. useRefuseRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다. const ref = useRef(initialValue) 직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능합니다.useRef 훅이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능합니다.​ 공식문서 내용useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.  useRef 설명useRef는 React에서 제공하는 Hook 중 하나로, 주로 다음과 같은 두 가지 용도로 사용됩니다:DOM..

props , PropTypes, map , events,  useState  1. props props 는 Properties 의 줄임말 부모 컴포넌트에서자식 컴포넌트에 값을 전달할때 자식 컴포넌트에서 부모의 값을 받아올때  JSX 문법에서  컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있음 , 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달 React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐릅니다. 하위 컴포넌트는 전달 받은 props를 읽기만 가능하고, 쓸 수 없습니다. (READONLY)  https://react.dev/learn/passing-props-to-a-component Passing Props to ..

fullpage.js  https://alvarotrigo.com/fullPage/ko/ fullPage scroll snapping. Create full screen pages fast and simpleMouse wheel snap to sections. Fast and simple to use.alvarotrigo.com # 옵션  https://github.com/alvarotrigo/fullPage.js?tab=readme-ov-file#options GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simplefullPage plugin by Alvaro Trig..