본문 바로가기

부트캠프교육중301

useCallback -렌더링 최적화를 위한 hook이다. -useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. -useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook입니다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; } -현재 이 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태입니다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력하고 있습니다. 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어질 것입니다. -useMemo와 마찬가지로, 해당 컴포넌트가 리렌더링 되.. 2023. 3. 22.
useMemo # 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있습니다. -렌더링 최적화를 위한 hook이다. -특정 값(value)를 재사용하고자 할 때 사용하는 Hook입니다. function Calculator({value}){ const result = calculate(value); return {result} ; } -해당 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출력을 하고 있습니다. -해당 컴포넌트는 렌더링을 할때마다 이 함수를 계속해서 호출할 것이다. /* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import { useMe.. 2023. 3. 22.
Hook과 Component # Hook은 함수 컴포넌트에서 사용하는 메소드입니다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었습니다. # class component class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.handleIncrease.bind(this); } handleIncrease = () => { this.setState({ counter: this.state.counter + 1 }) } render(){ return ( You clicked {this.state.counter} times Click me ) } } # functi.. 2023. 3. 22.
React Diffing Algorithm -비교알고리즘 -diffing 알고리즘은 heuristics 알고리즘의 일종이다. -diffing 알고리즘에서는 heuristics 알고리즘을 이용한 순회를 하게 되고 변경된 결과를 업데이트 한다. -두가지 가정을 가지고 시간 복잡도의 새로운 휴리스틱 알고리즘(heuristics)을 구현한다. 1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다. 2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼수있을것이다. -react는 기존의 가상 dom트리와 새롭게 변경된 가상dom 트리를 비교할때 트리의 레벨 순서대로 순회하는 방식으로 탐색한다.(BFS의일종) #다른 타입의 dom 엘리먼.. 2023. 3. 22.

티스토리툴바