hee-ya07 님의 블로그

8. useCallback: 인수로 넘겨 받은 "callBack" 을 캐싱    => 함수에 대한 저장(메모리제이션): 동일한 함수가 계속 재사용되므로 불필요한 리렌더링을 방지const cachedFn = useCallback(fn, dependencies)첫번째 인수로 캐싱할 함수두번째 인수로 의존성 배열: 자식 컴포넌트가 React.memo로 최적화된 경우, 자식으로 함수를 보낼 경우 callback을 통해 렌더링 방지: 자주 되는 함수일 경우 매번 재생성 하지 않고 메모리에 캐싱된 함수를 재사용더보기더보기const ChildComponent = React.memo(({ onClick }) => { console.log('Child component rendered'); return Click M..

6. useLayoutEffect: WB가 re-paint 전 실행되는 useEffect의 일종useLayoutEffect(setup, dependencies?)const Example = () => { useLayoutEffect(() => { console.log('렌더링 후, 화면에 그리기 전에 실행됩니다.'); }, []); // 의존성 배열이 빈 배열이면, 컴포넌트가 처음 렌더링된 후에만 실행 return Example;};: useEffect와 동일하게 생겼고 엇비슷하게 동작함- 차이점특성useEffectuseLayoutEffect실행 시점렌더링 - 페인팅 후렌더링 후 - 페인팅 전 사이에 실행동기 | 비동기비동기동기렌더링에 영향비동기 작업 -> 렌더링에 영향 X화면을 그리기 전 동..

7. useMemo: 비싼 계산에 대한 결과를 저장(메모리제이션)하고, 의존성 배열을 트리거로 하여 변화가 없으면 저장된 값 반환: 일반적으로 "값" 에 대한 저장const cachedValue = useMemo(calculateValue, dependencies)첫번째 인수로는 값을 반환하는 생성 함수- 단순한 연산 결과만 아니라 컴포넌트 또한 포함한다.두번째 인수로는 의존하는 값의 배열 // useMemo를 사용하여 필터링된 리스트를 캐싱 const filteredItems = useMemo(() => { console.log('Filtering items...'); return items.filter(item => item.toLowerCase().includes(filterText...

4. useEffect: side-Effect를 처리하기 위한 Hook: 컴포넌트가 로드될 때, 외부에서 발생하는 작업을 처리하는 함수const Component=()=>{ ... useEffect(()=>{ // 할 일 }, [props, state] //const App = () => { const [count, setCount] = useState(0); // useEffect로 부수효과 처리 useEffect(() => { // 이 함수는 렌더링 후에 실행 console.log('컴포넌트가 렌더링되었습니다!'); }, []); // 빈 배열을 전달하면 이 effect는 컴포넌트가 처음 렌더링될 때만 실행 return ( Count: {count..

5. useContext: React의 Context API와 함께 사용: 여러 컴포넌트에서 전역 상태를 공유 -> props drlling(props의 수직적인 전달) 회피 가능5.1 Context: props drlling을 극복하기 위한 개념: 명시적인 props 전달 없이 하위 컴포넌트에서 사용 가능5.2 Context API의 구성 및 사용 방법- Context :: 전역 상태가 저장- Provider :: 전역 상태를 제공, 어디까지 수평적 전달을 할지 제한, 사용할 범위를 감싸고 있어야 함- Consumer :: 전역 상태를 사용-접근 3개의 절차Create :: createContext - DefaultValue 설정 (Provider 외부에서도 사용 가능 값)Provider :: Crea..

3. useRef: useState, useReducer와 동일하게 컴포넌트 내부의 리렌더링에도 상태 값 저장 가능: useRef를 통한 지정은 외부 변수(= 비제어 컴포넌트로, 변경 시에도 리렌더링 X)     -> ref객체는 js엔진 내의 Heap 내를 포인트     -> Heap 내의 객체를 바꾸는 것이기 때문에 주소 자체는 미변동const refPoint = useRef(); // 초기 값 미지정시, undefined- DOM지정 시, 초기 값은 null  || 다른 값의 경우 알아서.... // refPoint.current객체 안의 value로 해당 input안의 값에 접근 가능- 값을 리렌더링 없이 따로 저장하거나, DOM에 대한 직접 조작 시, 해당을 사용 - Ex더보기import '@/..

2. useReducer: 상태 관리 훅: useState보다 복잡한 상태 로직을 처리할 경우 유용: 주로 여러 하위 값들이 의존하는 상태를 관리 or 상태 업데이트 로직이 복잡할 경우 사용const [, ] = useReducer(, , );const [state, dispatcher ] = useReducer(reducer, initialState, init);구성- 반환 값은 useState와 동일하게 상태 값과 업데이트 함수-  state :: 현재 useReducer의 값- dispatcher :: state를 업데이트하는 함수, setState와 달리 인수로 정해진 action 값을 넘김(동작을 미리 정의 및 제한)- reducer :: useReducer의 기본 ..

1. useState: 함수형 컴포넌트 내부에서 상태를 정의 및 관리: useState로 지정은 내부 변수 (= 제어 컴포넌트로, 변경 시 리렌더링O)const [state ,setState] = useState(); // 초기값 미정의 시 undefined: 현 상태, 세터가 제공됨유의점- setState를 통해 값을 업데이트할 경우 비동기적 업데이트임 확인해야함- 리렌더링 시에 set~를 한번에 진행const App = () => { const [state, setState] = useState('hello') return ( {state} { setState('hi') console.log(state) // hello }} ..

1. Vite: Vue, React, Svelte 등을 지원하는 빌드 도구1.1 배경- 다른 번들링 도구들인 webpack, Rollup, Parcel의 경우,1) JS의 크기가 커지면서 병목 현상의 발생 가능성도 증가2) 느린 피드백(느린 반영)번들러 기반 설정의 흐름파일 편집 시, 전체 번들을 빌드  보여줌 -> 비효율적(파일 크기에 따른 속도의 선형적 저하를 초래) -> 이를 해결하고자 Vite가 나옴esbuild를 사용 → 종속성을 미리 번들로 묶음네이티브 ESM을 통해 소스코드 제공⇒ 네이티브 ESM에서 HMR을 수행 시, 편집된 요소의 주변만 교체 및 무효1.2 설치- 프로젝트 내 수동 설치npm install -D vite2. 파일 구성파일 설명 .eslintrc.cjs : 컴파일 설정 = ..

1. 기본적인 DOM과 WB의 Rendering 과정: Rander Tree = DOM Tree + CSSOM Tree1.1 첫 방문 -> WB의 Rendering 과정페이지 방문-> HTML 파일 로드WB의 렌더링 엔진 -> HTML 파싱 및 DOM 트리 생성(2)에서 CSS파일을 만나면 CSS 파일 로드 및 WB 렌더링 엔진을 통한 CSSOM 트리 생성WB는 DOM트리의 노드 순회 -> 사용자의 현재 페이지의 구성 노드만 방문(display:none 같은 안보이는 건 방문 X)방문한 노드에 대한 CSSOM 노드 탐색 및 CSS적용- layout( or reflow) : 각 노드가 화면 어느 좌표에 나타는지 계산하는 과정 -> 반드시 이후에 페인트를 함- painting : 레이아웃 단계를 거친 노드에..