본문 바로가기

Front-End/React.js21

component와 hook 에 적용한 SOLID - [hook 편] 목차SOLID 원칙 - FrontEnd에 적용이 가능할까?내 코드 의존성의 원인해결 방법 - component 또는 hook이 알아야 하는 정보 줄이기 (S: 단일 책임 원칙)잘못 설계하는 과정 (실제 예시) - 어떤 컴포넌트를 만드는지 알려줄 거에요.hook이 담당하는 데이터를 최소한 작게 분리해서 생각해보기 - 의미 덜어내기hook 분리의 장점 (O: 개방 폐쇄 원칙)컴포넌트와 컴포넌트 hook과 hook 간 최소한의 소통 통로 (I: 인터페이스 분리 원칙)수정된 설계 과정 (실제 예시) - 어떤 컴포넌트를 만드는지 안 알려줄 거에요.추가된 요구사항 (실제 예시)잠깐 component이야기를 해보자. 렌더링에서 예상치 못하게 의존성이 문제가 되는 지점 - map 메서드 고찰 (I: 인터페이스 분리 원.. 2024. 7. 21.
useEffect 의존성 제거 useEffect는 코드 흐름을 파악하기 어렵게 만든다는 생각이 들었다. 일단 렌더링 된 이후 useEffect가 실행되기 때문인데 만약 의존성 배열에도 여러 내용이 추가되면 ..? 리렌더링 되는 횟수를 줄이기 위한 방법이 있을지 생각하다가 공식 문서를 읽어보게 됨. https://ko.react.dev/learn/removing-effect-dependencies 가능하면 의존성을 줄이기 위한 방법들이 소개되어 있었고, 의외로 간단하게 해결할 수 있는 내용들이 있어서 간단하게 기록 useEffect 의존성 제거하기 1. 함수를 useEffect 내부에 작성 2. 객체를 포함해야 한다면? 구조분해 할당으로 원시값 추출하기 => 객체는 계속 참조값이 바뀌기 때문. const {id, name} = obj .. 2024. 1. 23.
React lifecycle 함수형 컴포넌트 렌더링 트리거 1. Props또는 state 변경시 2. 부모 컴포넌트 리렌더링 렌더링 순서 초기 렌더링 컴포넌트 업데이트 state, props 변경시 리렌더링 시작 함수형 컴포넌트 전체 함수가 다시 실행( JSX 코드 반환 ) (반환된 JSX 코드는 createElement함수를 통해) 새로운 VDOM 트리로 변환(생성) VDOM 비교 VDOM 업데이트 실제 DOM 업데이트: DOM에 반영하여 브라우저에 업데이트 custom Hooks의 경우, JSX를 반환하지 않고 VDOM을 생성하지도 않는데 useEffect가 Mount, Update, unMount일 때도 실행된다는 건 부모의 컴포넌트에서 리렌더링 되었기 때문 2023. 12. 15.
2장 올림픽 통계 서비스 최적화(1/2) [프론트엔드 성능 최적화 가이드] 지난 시간까지는 FCP, IS, LCP, TTI, TBT 이미지를 외부에서 받아와 사용할 때, 크기 조절 하는 것 메모리를 많이 사용하는 코드(함수)를 발견했고, 해당 코드를 최적화한 것 코드 자체를 압축한 내용 Lighthouse 패널에서 확인할 수 있는 것 - DIAGNOSIS - OPPORTUNITY 네트워크 패널에서 확인할 수 있는 것 - Disable cache, Fast 3G Performance 패널에서 확인할 수 있는 것 - Performance 탭의 CPU: throttling - Performance 탭: Memory 체크 체크 포인트 1. HTML 파싱으로 DOM 트리 생성, CSS 파싱으로 CSSOM 생성, DOM과 CSSOM으로 렌더트리 생성, 렌더트리로 리플로우, 리페인트, 컴포.. 2023. 6. 26.
useEffect html 렌더링 이루에 동작하기 때문에 오래 걸리는 작업을 넣어볼 수 있다 Lifecycle에서 mount update unmount 과정에 실행 가능하다. - cleanup function : useEffect 동작 전에 특정 코드를 실행하는 방법 => useEffect를 통해 생성되는 코드가 있다면, 의존성 배열때문에 그게 계속 추가될 수 있다. 새로운 것은 추가하되 이전 것은 삭제하고 싶은 경우 등에 사용될 수 있다. useEffect(()=>{ // 2번째로 실행 return ()=>{ // 1번째로 실행 } }, [state변수]) 각 useEffect 코드의 차이점 // (1) useEffect(()=>{ ... }) // (2) useEffect(()=>{ ... }, []) // (3) u.. 2023. 3. 28.
Virtual DOM 실제 DOM을 복사한 게 가상 돔 수정할 element, 그의 하위 element를 찾아서 교체 가상돔은 실제 브라우저 화면에 접근하는게 아니기 때문에 가볍다. 리액트는 2개의 가상돔 객체를 갖고 있다. 1. 렌더링 이전 가상돔 2. 렌더링 이후 가상돔 Diffing: 둘을 비교해서, 어떤 지점이 바뀌었는지 찾아낸다. Batch Update: 만약 10개의 요소가 바뀌었다면 10번에걸쳐서 바꾸는게 아니라, 변경된 모든 부분을 한번만에 집단으로 바꾼다) 변경된 돔만 수정 Reconsiliation 재조정 과정: Diffing 파악 후, Batch(집단) Update하는 과정 2023. 3. 23.
state 란? 무엇인가 . . .🙄 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. 거의 내가 알고있는 개념에 부합하는데, 최근에 데이터를 state로 관리하면서.. 코드를 분리할 때 데이터와 state에 대한 고민을 많이 했다. 초반 고민은 데이터 관련된 로직이 너무 길었기 때문에 코드를 다른 파일로 분할하는 것 이었다. 1. axios로 받은 500개 가량의 객체 데이터들을 받고 2. 해당 데이터를 state로 저장한다. 3. 데이터를 필터링 한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 4. 데이터를 정렬한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 5. 렌더링을 한다. 그래서 코드를 분리하려고 했고, 시도해본 방법은 크게 두가지였다... 2023. 3. 22.
React.memo 실험 이전에도 React.memo 개념글을 작성한 적이 있는데, https://hello-kk.tistory.com/679 리-렌더링을 막기 위한 방법으로 다시 접근해보니 새로워서 다시 정리했다. //App.jsx import { Fragment, useState } from "react"; import Tmp from "./Components/Tmp"; function App() { const [state, setState] = useState(1); const handleButton = () => { setState((prev) => prev + 1); }; return ( hi~ {state} 버튼 ); } export default App; (1) React.memo를 사용하지 않은경우 버튼을 매번 클.. 2023. 3. 17.
state 관리 대상 줄이기를 고민하다가 => useMemo, useCallback까지 useState를 사용해서 state를 관리할 때, 렌더링을 고민하게 되면서 state 변수와 관련되어 있지만 직접적으로 렌더링에 관여하지 않아도 되는 함수 혹은 변수에 관심이 생겼다. 'state와 구분해서 사용한다면 렌더링 되는 횟수를 줄일 수 있지 않을까?' 같은 의문에서 포스팅을 시작했던 것 같은데.. 어떤 변수 혹은 함수를 state로 관리하지 않을 수 있을까? 모든 것을 state로 관리하지는 않아도 될텐데. 일단 index.js에서 React.StrictMode를 삭제한다. 그렇지 않으면 두번 실행되어서 값에도 영향을 미치게 된다. //src/index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.ren.. 2023. 3. 17.

티스토리툴바