티스토리

ggangsa의 블로그

검색하기

블로그 홈

ggangsa의 블로그

ggangsa.tistory.com/m

깡사 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

React - Hooks (useCallback / React.Memo) (4) useCallback ✔ - memoization 된 콜백 반환 의존성 배열의 값이 변하지 않으면 콜백 함수를 계속 재사용 할 수 있음 useCallback(() => {...}, [dependencies]) - 첫번째 인수: 저장할 함수 - 두번째 인수: dependency 배열 고차 컴포넌트 ✔ - 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 컴포넌트 로직을 재사용하기 위한 React의 고급 기술로, React API의 일부가 아니며 React의 구성적 특성에서 나오는 패턴 React.Memo ✔ - 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화 가능 위의 경우, 부모 컴포넌트가 리렌더링 되면서 prop이 바뀌지 않은 자식 컴포넌트도 리렌더링이 발생해.. 공감수 0 댓글수 0 2023. 3. 12.
React - Hooks (useRef / useMemo) (3) Memoization - 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 ⇒ 적용하면 중복 연산을 피할 수 있어 메모리 성능 최적화 가능 useMemo ✔ - 연산 결과 재사용, 함수 연산 최적화 기법 memoization 하고 싶은 함수를 감싸줌 const getAnalysis = useMemo( () => { const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRat.. 공감수 0 댓글수 0 2023. 2. 23.
React - Hooks (useState / useEffect) (1) Props ✔ - 컴포넌트에 데이터를 전달하는 방법 props의 값을 지정해주지 않아 발생하는 오류를 방지하기 위해 기본 props의 값을 임의로 지정할 수 있음 component.defaultProps = { name: value, } ⇒ 함수 매개변수처럼 컴포넌트에 전달됨 더보기 - 컴포넌트: JavaScript 함수와 유사한 개념 State ✔ - 계속해서 변화하는 특정 값으로 이 값에 따라 다른 행동을 수행하도록 함 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됨 ⇒ 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨 LifeCycle ✔ - 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스 소프트웨어를 견고하고 효율적으로 개발하기 위해서는 개발하는 기술의 lifeCycle.. 공감수 0 댓글수 0 2023. 2. 5.
React - SPA / MPA / CSR / SSR 여러 페이지로 구성된 웹 서비스를 만들기 위해서는 웹 서버가 여러개의 페이지를 어떻게 관리하고, 페이지 이동 요청을 어떻게 처리하는지 알 필요가 있음 SPA (Single Page Application) - 단일 페이지로 이루어진 간단한 웹 어플리케이션 브라우저에 최초로 한 번만 페이지 전체를 로드한 후, 이후엔 변화된 데이터만 서버에 요청/반환 하고 브라우저 내에서 페이지를 업데이트 시킴 - 장점 ① 필요한 데이터만 렌더링하기 때문에 효율적이고 빠름 - 단점 ① 최초 로딩 시 페이지 전체에 대해 로드하기 때문에 로딩 시간이 걸림 ② SEO 관점에서 불리함 더보기 - SEO(Search Engine Optimization, 검색 엔진 최적화): 웹 사이트와 웹 페이지를 검색 엔진이 일련의 과정을 거쳐 자.. 공감수 0 댓글수 0 2023. 1. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.