Framework/React

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..

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

React자바스크립트 라이브러리, 사용자 인터페이스를 만드는데 사용사용하기 쉽고, 로딩 기다릴 필요 없고, 화면 전환 빠름전통적인 웹사이트약간 무겁고, 불편함링크나 버튼 클릭 시 요청이 서버에 전송되고, html 페이지가 브라우저로 보내져서 화면에 보여줌새로운 html 페이지가 로딩되는 동안 기다려야 함 DOM 조작 : html 요소들이 화면에 렌더링됨JS 조작 : 사용자들이 보는 것 변경 가능(새로운 html 페이지 불러오지 않아도 됨) 왜 자바스크립트에 추가적으로 리액트가 필요할까?JS로 작업 할때는 모든 단계를 일일이 작성해야 함(명령형 접근방식) : 일련의 액션들을 단계별로 설명리액트는 유지보수와 관리가 용이하도록 유지됨최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줌선언형 방..