전체 글 (11) 썸네일형 리스트형 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.. React - Hooks (useState / useEffect) (1) Props ✔ - 컴포넌트에 데이터를 전달하는 방법 props의 값을 지정해주지 않아 발생하는 오류를 방지하기 위해 기본 props의 값을 임의로 지정할 수 있음 component.defaultProps = { name: value, } ⇒ 함수 매개변수처럼 컴포넌트에 전달됨 더보기 - 컴포넌트: JavaScript 함수와 유사한 개념 State ✔ - 계속해서 변화하는 특정 값으로 이 값에 따라 다른 행동을 수행하도록 함 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됨 ⇒ 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨 LifeCycle ✔ - 컴포넌트가 생겨나고, 변화하고, 없어지는 일련의 프로세스 소프트웨어를 견고하고 효율적으로 개발하기 위해서는 개발하는 기술의 lifeCycle.. React - SPA / MPA / CSR / SSR 여러 페이지로 구성된 웹 서비스를 만들기 위해서는 웹 서버가 여러개의 페이지를 어떻게 관리하고, 페이지 이동 요청을 어떻게 처리하는지 알 필요가 있음 SPA (Single Page Application) - 단일 페이지로 이루어진 간단한 웹 어플리케이션 브라우저에 최초로 한 번만 페이지 전체를 로드한 후, 이후엔 변화된 데이터만 서버에 요청/반환 하고 브라우저 내에서 페이지를 업데이트 시킴 - 장점 ① 필요한 데이터만 렌더링하기 때문에 효율적이고 빠름 - 단점 ① 최초 로딩 시 페이지 전체에 대해 로드하기 때문에 로딩 시간이 걸림 ② SEO 관점에서 불리함 더보기 - SEO(Search Engine Optimization, 검색 엔진 최적화): 웹 사이트와 웹 페이지를 검색 엔진이 일련의 과정을 거쳐 자.. 이전 1 2 다음
