늘 겸손하게

[ 메모이제이션 ( Memoization ) ? ] 메모이제이션이란 프로그램에서 같은 계산을 반복하는 경우, 계산 결과를 메모리에 저장해두고 재활용하여 같은 계산을 반복하는 낭비를 막아 프로그램의 성능을 향상시키는 기술입니다 동적계획법(Dynamic Programming)의 핵심이 되는 기술로 계산값을 재활용하기 위해 메모리에 저장해두는것을 메모이징(Memoizing)이라고 합니다. [ React의 Memoization ] 리액트의 메모이제이션은 세 가지로 이루어집니다 React.memo useCallback useMemo [ 1. React.memo ] 컴포넌트에 둘러싸 컴포넌트 자체를 메모이제이션합니다. 이전 props와 동일한 props가 전달될 경우 새로 컴포넌트를 렌더링하지 않고 메모이징된 컴포..

useCallback, useMemo useCallback, useMemo 모두 React 최적화를 위해 사용되는 hook입니다. useCallback은 메모이제이션된 콜백(함수)을 반환하고 useMemo는 메모이제이션된 값을 반환합니다. 메모이제이션? Memoization이란 프로그램이 같은 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장해두고 재활용하며 불필요한 반복계산을 제거하여 프로그램 속도를 빠르게 하는 기술이다. 동적 계획법(Dynamic Programming)의 핵심이되는 기술 계산값을 재활용하기 위해 메모리에 저장해두는것을 메모이징(Memoizing) 이라고 합니다. React.memo 컴포넌트가 부모로부터 같은 props를 전달받고, 같은 컴포넌트를 렌더링한다면 불필요한 리렌더링을 ..

state를 this.state으로 직접 변경할 수 있습니다. 하지만 공식문서도 그렇고 많은 글을 보면 절대로 직접 수정하지 말고 setState로 state를 변경하라고 합니다. 하지만 왜 그래야할까요? [ state를 직접 변경하면 안되는 이유 ] React는 Unidirectional data flow를 따릅니다. 이 말의 의미는 React 내부의 데이터 플로우는 언제나 단방향, 원형으로 순환할것으로 예측한다는 의미입니다. React를 이렇게 실행되게 하기 위해 개발자들은 React를 함수형 프로그래밍과 비슷하게 만들었습니다. 함수형 프로그래밍에서 가장 중요한 규칙은 immutability(불변성)입니다. [ React의 Unidirectional data flow가 동작하는 방식 ] state는 ..

[ JSX ] JSX는 JavaScript XML의 약자로 자바스크립트를 확장한 문법입니다. JSX는 React의 "엘리먼트"를 생성합니다. [ JSX 표현식 ] JSX의 중괄호로 자바스크립트 데이터를 HTML에 포함시킬 수 있습니다 const name = 'Josh Perez'; const element = Hello, {name} ReactDOM.render( element, document.getElementById('root') ); JSX 중괄호 안에는 모든 JavaScript 표현식을 넣을 수 있습니다. 사칙연산, 객체 속성, 함수 호출식도 중괄호 안에 넣을 수 있습니다. 아래의 예는 함수 호출 결과를 HTML 엘리먼트에 포함시키는 예시입니다 function formatName(us..