React9 React - useCallback useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 활용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; } 해당 컴포넌트가 리렌더링 되더라도 그 함수가 의존하고 있는 값인 x와 y가 바뀌지 않는다고 가정해보자. 그렇다면 함수 또한 메모리 어딘가에 저장해 뒀다가 다시 꺼내서 쓸 수 있다. /* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import React, { useCallback } from .. 2023. 5. 23. React - useMemo Hook이란? Hook은 React 16.8에 새로 추가된 기능이다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook을 사용할 때는 두 가지 규칙을 준수해야만 한다. 1. 리액트 함수의 최상위에서만 호출하여야 한다. 2. 오직 리액트 함수 내에서만 사용되어야 한다. useMemo useMemo는 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. function Calculator({value}){ const result = calculate(value); return {result} ; } 위의 컴포넌트는 props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출.. 2023. 5. 22. React - Diffing Algorithm 1. 각기 서로 다른 두 요소는 다른 트리를 구축한다. 2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있다. React는 위의 두 가정을 가지고 새로운 휴리스틱 알고리즘(Heuristic Algorithm)을 구현해내었다. 실제 이 두 가정은 거의 모든 실제 사용 사례에 들어맞게 됩니다. 여기서 React는 비교 알고리즘(Diffing Algorithm)을 사용한다. *휴리스틱(Heuristic)이란 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있게 보다 용이하게 구성된 간편한 추론의 방법을 뜻한다. Diffing Alg.. 2023. 5. 22. React - Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM객체를 활용한다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀어보면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우.. 2023. 5. 22. React - Styled Components Styled Components CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이러한 CSS in JS 라이브러리 중에서 현재 가장 있기 있는 라이브러리가 Styled Components이다. Styled Components 문법 1. 컴포넌트 만들기 ES6의 Templete Literals 문법(백틱 `)을 사용한다. 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 컴포넌트를 선언하고 styled( )에 재활용할 컴포넌트를 전달해주면 된다. 3. Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를.. 2023. 4. 19. React - Effect Hook Hook의 2가지 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다 오직 React 함수 내에서 Hook을 호출해야 한다. useEffect의 3가지 형태 1. 아무것도 넣지 않기(기본 형태) - useEffect(함수) 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때 effect 함수가 실행된다. 2. 빈 배열 넣기 - useEffect(함수, []) 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때 사용할 수 있다. 3. useEffect(함수, [종속성1, 종속성2, ... ]) 배열 내의 종속성1, 또는 종속성 2의 값.. 2023. 4. 3. 이전 1 2 다음
