fullstack-study

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

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://ko.react.dev/learn/passing-props-to-a-component 컴포넌트에 props 전달..

react 시작 react 개념 컴포넌트컴포넌트종류컴포넌트 이름JSX란JSX 규칙 vscode : 확장프로그램 Reactjs code snippetsCodeSnap 공식문서바로가기바로가기 리액트란리액트(React)는 페이스북에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 웹 애플리케이션의 UI를 구성하는 데 사용되며, 단일 페이지 애플리케이션(SPA)부터 모바일 애플리케이션, 데스크톱 애플리케이션까지 다양한 플랫폼에서 사용될 수 있습니다. 리액트의 특징과 장점 컴포넌트 기반 아키텍처(Component-based Architecture): 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 작성합니다. 각 컴포넌트는 독립적이고 재사용 가능한 모듈로서 ..