Framework

useMemo와 useCallback은 React의 훅으로, 각각 계산된 값과 함수의 메모이제이션을 도와줍니다.둘 다 성능 최적화에 사용되지만, 그 목적과 사용 방법이 다릅니다. useMemo목적 : 계산된 값을 메모이제이션하여 불필요한 재계산을 방지합니다.사용법 : 계산이 필요한 값을 반환하는 함수를 인자로 받고, 그 값이 변경되지 않는 한 메모이제이션된 값을 반환합니다.const computedValue = useMemo(() => { return expensiveCalculation(someValue);}, [someValue]);여기서 expensiveCalculation은 someValue가 변경될 때만 다시 계산됩니다. useCallback목적 : 함수를 메모이제이션하여 함수가 새로 생성되는..

useCallbackReact 컴포넌트가 리렌더링되면 해당 컴포넌트 함수들이 새로 만들어집니다.자바스크립트에서는 함수도 곧 객체이기 때문에 리렌더링이 되면 '내용이 동일한 새로운 함수 객체'가 생성됩니다.useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 두번째 매개변수인 deps가 업데이트되지 않는다면 함수 객체를 독립된 메모리에 캐싱해두고, 리렌더링 시 새로운 함수 객체를 생성하지 않기 때문에 해당 함수를 props로 가지는 자식 컴포넌트들은 함수가 바뀌었다고 생각하지 않게 됩니다.따라서, 자식 컴포넌트의 props로 전달해주는 함수들은 useCallback을 사용해주면 재실행이 일어나는 횟수가 줄어들기 때문에 더 효율적인 앱을 만들 수 있습니다.const onCrea..

State를 스냅샷으로 보기 리액트의 상태 변수는 그냥 일반적인 자바스크립트 변수처럼 보이지만 상태는 하나의 스냅샷에 더 가깝다. setState 함수를 이용하여 상태를 업데이트하는 것은 현재의 상태를 변경시키지 않고 리렌더링을 일으킨다. 상태 값을 변경하는게 어떻게 리렌더링을 일으키는가? 언제 그리고 어떻게 상태가 업데이트 되는가? 왜 상태는 변경 즉시 업데이트되지 않는가? 이벤트 핸들러가 어떻게 상태의 스냅샷에 접근하는가? State를 설정하면 렌더링을 일으킨다. 사용자가 마우스 클릭 이벤트를 일으키는 즉시 상태가 변경된다고 생각이 들 수도 있다. 하지만 리액트에서는 이런 Mental Model과는 다르게 동작한다. 인터페이스가 이벤트에 반응하려면 state를 업데이트 해야한다. import { us..

한글 문자열을 검색해주는 방법인데, 리소스 작업을 진행하며 유용하게 사용해서 작성합니다. Ctrl(cmd) + F 또는 Ctrl(cmd) + Shift + F 를 눌러서 [^\x00-\x7F]+ 로 검색 검색할 때 Use Reguler Expression 아이콘을 켜둬야 합니다.

let과 constvar : 자바스크립트에서 변수를 생성함절대 변하지 않는 변수 - 상수 let과 const를 사용할 것을 권장!!let : 새로운 var이라고 생각하면 되고, 변수를 선언할 떄 사용let과 const는 모두 변수들의 범위를 변경하는 것들이다. let은 값을 수정할 수 있는 변수를 선언할 때 사용, const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용const에는 새로운 값을 할당할 수 없다. 화살표 함수(Arrow Functions)function myFnc(){...} const myFnc = () => {...}화살표 함수는 키워드 this로 인해 생기는 문제를 해결해줌!this 키워드는 항상 내가 원하는 객체를 참조하지 않는 문제가 있음화살표 함수 안에 this..