Front-end/React (14) 썸네일형 리스트형 useLayoutEffect 컴포넌트 생명주기를 관리하기 위해 사용되는 Hook useEffect비동기적으로 실행이벤트 루프의 테스크 큐에 콜백이 쌓이는 방식으로 동작useEffect의 콜백이 task queue에 쌓여, DOM 업데이트 후 실행되기 때문비동기 작업이나 DOM업데이트 후에 실행되어야 하는 작업에 사용사용되는 케이스: 데이터 fetching, 이벤트 리스너 useLayoutEffect동기적으로 실행DOM이 업데이트 되기 전에 실행렌더링 후, 페인팅 전에 실행DOM 조작이나 레이아웃 측정과 같은 작업에 사용동기적 실행으로 인해 성능에 영향이 있을 수 있어 필요한 경우에만 사용사용되는 케이스: 툴팁, 모달, DOM 측정 ( DOM요소의 크기나 위치 측정이 필요한 경우 ) 서버 컴포넌트(RSC) react 18 이상 환경에서 사용가능기존 react component vs server component기존 react component server component모든 컴포넌트가 클라이언트(브라우저) 에서 렌더링컴포넌트를 서버에서 렌더링하고 결과만 클라이언트로 전송javascript 번들이 클라이언트로 전송되어 실행됨javascript 코드가 아닌 UI 표현만 전송됨초기 로드 시간이 느릴 수 있음 ( 큰 JS 번들 다운로드 )클라이언트 번들 사이즈 감소 및 초기 로드 시간 개선 주요 특징서버에서만 실행되어, useState, useEffect 등 ui 상태 관련 hook 사용불가브라우저 API 접근 불가서버 리소스 직접 접근 가능 ( ex - 해당 서버 내의 DB 직접 접근 가능 )서버 컴포넌트는.. React 상호작용 추가하기 State: 컴포넌트의 메모리 상호작용으로 화면의 내용을 변경해야하는 경우가 많음 컴포넌트는 변경되는 내용을 "기억" 해야함 React 에서는 컴포넌트별 메모리를 state 라고 부름 Render and commit Step 1. trigger render: react가 손님의 주문을 주방으로 전달 컴포넌트 렌더링을 촉발시키는 원인은 두가지 컴포넌트의 첫 렌더링 컴포넌트의 state(또는 상위 요소중 하나) 가 업데이트된 경우 set 함수로 state 가 업데이트 되고 이것은 렌더링을 촉발시킴 컴포넌트의 state를 업데이트하면 자동으로 렌더링 대기열에 추가됨 (즉시 렌더링이 되는것이 아님) Step 2. React가 컴포넌트를 렌더링합니다 랜더링을 촉발시키면 React는 컴포넌트를 호출하여 화면에 표시.. React로 사고하기 컴포넌트라고 하는 조각으로 분해하고 서로 다른 시각적 상태를 기술 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. Step 1: UI 컴포넌트 계층 구조로 나누기 단일책임원칙에 따라 컴포넌트를 분해하고 이름을 지정 변하지 않는 것은 상위컴포넌트에 그대로 유지 (내가 고안한 방식) 변하는것들(재사용되는것)들은 하위 컴포넌트로 생성 (내가 고안한 방식) 상위 컴포넌트에서 하위컴포넌트로 내려가면서 필요에 따라 분해하는것이 효율적으로 보임(미리 작게 쪼개면 필요이상의 분해가될수있음) Step 2: 정적인 UI 만들기 상호작용을 추가하지 않고 정적 UI 구성 state없이 prop만을 이용하여 구성 간단한 ui의 경우 하향식으로 진행 대규모 프로젝트에서는 상향식으로 진행(최소 단위부터 구현) 데이터가.. Memoization(memo, useCallback) Memoization, 기존에 수행한 연산의 결과값을 저장해두고 동일한 input이 들어오면 재사용 하는 프로그래밍 기법 useMemo const z = useMemo(() => compute(x, y), [x, y] 첫번째 인자로 결과값을 생성해주는 팩토리 함수 두번째 인자로 기존 결과값의 재사용 여부를 결정할 기준이 되는 입력값의 배열 x, y가 전과 동일할 경우 저장해두었던 결과값을 재사용함 x, y가 전과 달라졌을경우, () => compute(x, y) 함수를 호출하여 결과값을 새롭게 구해 z에 할당 사용시 주의점 필요 이상의 사용으로 컴포넌트 복잡도를 넢여 유지보수성을 떨어뜨리지 않게 할것 useMemo가 적용된 reference는 재사용을 위해 가비지 컬렉션에서 제외되기 때문에 메모리를 더 .. controlled & uncontrolled input setState를 사용하면 안된다 ref는 나쁘다 로 두가지 모순되는 의견들이 있다 Uncontrolled uncontrolled(비제어) input은 전통적인 HTML form input이다 class Form extends Component { handleSubmitClick = () => { const name = this._name.value; // do something with `name` }; render() { return ( (this._name = input)} /> Sign up ); } } 위와 같은경우 ref를 통해 해당 component의 value를 가져올 수 있다.(pull value) form 이 submit 되는 경우 일어날 수 있다 Controlled controlled.. useRef & Refs useRef hook 은 mutable value(참조 또는 ref) 를 생성하고 DOM element에 접근하기위한 hook Mutable value useRef 는 초기값을 받고 참조(ref)를 리턴함 ref는 'current'라는 특수한 속성을 가진 객체임 import { useRef } from 'react'; function MyComponent() { const initialValue = 0; const reference = useRef(initialValue); const someHandler = () => { // ref의 value에 접근 const value = reference.current; // ref의 value 수정 reference.current = newValue; }; /.. Next page page 디렉토리 내 .js, .jsx, .ts, tsx 확장자를 가지는 파일들을 filename 기반으로 라우팅 됨 // pages/about.js export default function About() { return About } dynamic Rountes pages/posts/[id].js -> posts/1 처럼 동적인 url 을 가지는 페이지를 구성할 수 있음 // pages/[id].tsx import { useRouter } from "next/router"; export default () => { const router = useRouter(); return ( post postid: {router.query.id} ); }; pre-rendering static gener.. 이전 1 2 다음
