Frontend/React40 React useCallback, useMemo useCallback, useMemo 둘다 메모이제이션을 활용하는 것입니다. 메모이제이션 이란 동일한 계산을 반복할때 이전에 계산한 값을 가지고 있다가 같은 계산일 경우 이미 계산된 값을 반환하는 것입니다. 재귀함수에서 주로 사용합니다. (피보나치 함수와 같은 예시) useCallback 메모이제이션된 콜백을 반환합니다. useCallback을 이용하면 의존성 배열의 값이 바뀌지 않는 이상 callback은 재정의 되지 않습니다. const callback = useCallback( () => { doSomething(a,b) }, [a, b], ) useCallback(fn, deps)는 useMemo(() => fn, deps)와 같습니다. useMemo 메모이제이션된 값을 반환합니다. 리액트에서는 .. 2022. 3. 27. React 의존성 배열 🌱 리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요? 의존성 배열은 shallow equal, deep equal중 무엇을 하게 되나요? 얕은 비교(Shallow Equal)와 깊은 비교에 대해서 설명해주세요. 의존성 배열의 역할은 배열안에 포함된 값의 변화를 감지하여 callback의 경우에는 함수의 재정의, effect의 경우에는 함수를 재실행 합니다. 이때 의존성 배열의 변화탐지는 shallow equal을 하게 됩니다. (리액트 에서는 javascript의 Object.is 비교 알고리즘을 사용합니다.) 얕은 비교는 해당 변수의 메모리 주소 값이 변경됬는지만 비교합니다. 객체 일경우 key 값들의 세부 값까지는 비교하지 않습니다.. 2022. 3. 27. React 피드백 내용 정리 2022.02.10 - [Frontend/React] - 넘블챌린지 [Square Select Game] 이때 피드백 받은 내용과 모범답안을 기반으로 현재의 코드를 리팩토링 해보았다. 그때 얻은 인사이트를 기록해보려 한다. 아쉬운 부분에 대한 의견을 들었을때 머리가 띵했다... 이제까지 이런식으로 작성했었고 나는 계속 이런식으로 봐왔으니까 가독성이 좋다고 생각했었다..... 완전히 우물안의 개구리 였던것..... 인수인계 했을때 읽히기 쉬운 코드를 작성하자는 신념이 있었는데 내 코딩 패턴은 전혀 그러지 못했었던 것..... 만약 프로젝트가 조금만 더 규모가 커졌었더라면 저 state와 handler를 정의하는 부분은 감당이 안되고 어디를 어떻게 바꾸어야 하는지를 도저히 알수가 없었을 것이다.... (쉽지.. 2022. 3. 4. React useLayoutEffect useEffect로 전달된 함수는 레이아웃 배치와 그리기를 완료한 후 발생합니다. 이렇게 지연시켜서 실행하는 이유는 useEffect에서 실행하는 동작으로 인해 브라우저에서 화면을 업데이트 하는것을 차단해서는 안되기 때문입니다. 그래서 아래와 같은 현상이 발생할 수도 있습니다. 발생할 수도 있다는 것은 고쳐야 할 때도 있다는 것을 의미한다고 생각합니다. 그래서 등장한 것이 useLayoutEffect 훅입니다. 위와 같은 사용자 경험이 발생하는 경우를 위하여 등장하였습니다. useLayoutEffect 훅은 dom이 화면에 그려지기 전에 업데이트를 해줍니다. 동작은 useEffect와 동일하다고 이해하고 동작하는 시점만 화면에 그리기전 useEffects는 dom 요소들이 화면에 그려지고 난후 반영된다고.. 2022. 3. 3. 제어 컴포넌트 vs 비제어 컴포넌트 react에서 제어 컴포넌트, 비제어 컴포넌트를 고려하여 form을 다루어야 하는 경우가 있었다. 제어 컴포넌트, 비제어 컴포넌트에 대한 개념이 없었고 이전에 formik을 다루었었던 경험이 있어서 습관적으로 제어 컴포넌트 형식으로 구현을 했었다. 그래서 제어, 비제어 컴포넌트에 대해 알아보려고 한다. 제어 컴포넌트 값이 바뀔때마다 매번 렌더링을 하게 된다. (좀 더 React스럽다 라고 언급이 되는것 같다) 코드의 내용을 보면 useState를 통해 상태값 하나를 추가해주었고 이는 Input의 value값이 된다. input의 onChnage 핸들러를 추가하여 input 입력값이 변경될때마다 상태를 업데이트 해주었다. 상태가 업데이트 되었으므로 렌더링이 일어난다. 매번 상태를 업데이트 해주므로 화면에 .. 2022. 3. 3. React twice render TLDR: 1. React의 strict 모드를 이용하면 render가 두번 이상씩 될 수 있다. 2. 이는 개발환경에서만 발생한다. 첫 시작은 이게 아니었다.... 처음의 의도와 기획은 render가 되는 것을 어떻게 count 할 수 있을까에 대한 호기심 이었다. 여정은 다음과 같다. 1. ref를 주고 받음에 치였고 2. forwardRef && typescript, useRef에 치였고 3. React.Strictmode에 치였다. 3개의 과정을 알아보고 인사이트를 찾아보자 오늘의 주제는 1번과 2번이 아니다. 1번과 2번은 빠르게 훑고 갈것이다. 1번에서는 ref를 부모에서 주고 자식에서 카운팅을 하나씩 올리려 했었다. 2번에서는 forwardRef를 통해 ref를 이름의 변경없이 보내서 자식에.. 2022. 2. 24. 이전 1 ··· 3 4 5 6 7 다음
