CS25 [React.js] forwardRef And useImperativeHandle - forwardRef 1. 함수형 컴포넌트에서 사용2. ref 전달 ( 부모 컴포넌트 -> 자식 컴포넌트 ) ex) import React, { forwardRef } from 'react'; const MyComponent = forwardRef((props, ref) => { return ; }); export default MyComponent; ============================================= import React, { useRef } from 'react'; import MyComponent from './MyComponent'; function ParentComponent() { const inputRef = useRef(null); return.. 2024. 8. 16. [React.js] useLayoutEffect vs useEffect - useLayoutEffect1. 동기적2. 컴포넌트 렌더링 직후3. 화면 업데이트 전4. 성능 이슈 발생 가능성5. DOM 요소 크기, 위치 계산 및 렌더링 결과 바로 접근 필요시 사용 - useEffect1. 비동기적2. 컴포넌트 렌더링 후 실행 2024. 7. 30. [FrontEnd] google lighthouse LCP/INP/CLS - LCP (Lagest Contentful Paint )1. 최대 콘텐츠 렌더링 시간2. 사용자가 URL을 요청한 시점부터 표시 영역에 가장 큰 시각 콘텐츠를 렌더링하는데 걸리는 시간3. 사이트의 최대 렌더링 속도가 2.5초 이하여야한다. - INP ( Interaction to Next Page )1. 다음 페인트까지의 상호작용.2. 클릭, 탭, 키보드 상호작용 반응 시간3. 페이지의 전반적인 반응성 평가4. 200 밀리초 이하 - 응답성 양호 / 200 ~ 500 : 개선 필요 / 500 ~ : 좋지않음 - CLS ( Cumulative Layout Shift )1. 누적 레이아웃2. 전체 수명 동안 발생하는 예상치 못한 레이아웃 변화 ( 개별적 )3. 숫자가 클수록 페이지 레이아웃 많은 변경4. .. 2024. 7. 29. [React.js] Life Cycle - 수명주기 (Life Cycle) : 컴포넌트가 생성되고 소멸될 때 발생하는 일련의 이벤트 : 컴포넌트 초기화, 렌더링, 업데이트, 소멸 등의 작업을 수행한다. 1. 마운트 ( Mounting) 1) constructor() : 컴포넌트 생성 시 호출, 초기 상태 설정, 메소드 바인딩 2) static getDerivedStateFromProps() : props 로부터 상태를 '동기적' 업데이트 ( v16.3 이후 도입 ) 3) render() : UI 렌더링 4) componentDidMount() : 컴포넌트 DOM 마운트 이후 호출, 네트워크 요청, 초기 데이터 로딩 2. 업데이트 ( Update ) 1) static getDerivedStateFromProps() : props 동기적 업데이.. 2024. 7. 24. 이전 1 2 3 4 5 6 7 다음