반응형 개발/React54 제어컴포넌트 비제어컴포넌트 제어컴포넌트 : 어플리케이션이 사용자 입력을 제어한다. 실시간으로 값에 대한 피드백이 필요할 때 사용 항상 최신상태 유지, 사용자가 입력하는 모든데이터 동기화 제어컴포넌트는 사용자가 입력하는 모든 데이터가 동기화 되기 때문에 불필요한 리렌더링 혹은 api요청으로 인한 과부하가 걸릴 수 있다. 이런 경우 보통 debounce를 사용하고 있다. (대부분 debounce 혹은 throttle을 사용할 듯) 비제어컴포넌트 : 어플리케이션이 사용자 입력을 제어하지 않음 제출시에만 값이 필요할 때 사용 사용자의 입력값이 어플리케이션을 업데이트 시키지 않음. 사용자가 직접 트리거하기 전까지 리렌더링이나 업데이트가 되지 않음. ref를 이용하여 form내의 값을 관리하면 불필요한 리렌더링을 방지할 수 있는데, 이러한 .. 2022. 10. 3. useRef 로 관리하는 값이 바뀌었을 때 리렌더링 되지 않는 이유 리액트의 리렌더링 조건 먼저 리액트의 리렌더링 조건에 대해 살펴보면 리액트의 리렌더링 조건은 다음과 같다. ( 더 자세하게는 이 블로그) setState를 이용한 state변경 부모컴포넌트 리렌더링 props변화 이전 state와 현재 state, 혹은 이전 props와 현재 props를 얕은 비교(메모리 주소비교)하여 이전값 현재값 변화를 감지한다. useRef useRef는 보통 리액트에서 리렌더링과 값의 변화를 분리하고 싶을 때 사용한다. 나의 경험으로는 dom 직접 변화, 카카오맵 안깜빡 거리게 하기 정도가 있다. 그렇다면 왜 useRef로 관리하는 값은 리액트의 리렌더링 알고리즘에 감지되지 않을까?? useRef는 heap영역에 저장된다. heap영역에 있으면 어플리케이션 종료 or 가비지 컬렉.. 2022. 10. 3. React.memo - Memoization을 이용한 불필요 리렌더링 없애기 우선 비슷한 상황을 부트캠프 4주 프로젝트때 겪은 일이 있다. 위에서 보면 메모란에 타자를 칠때마자 사진이 깜빡이는 것을 확인할 수 있다. 이때 React.memo로 해결했었다. React.memo 간단히 설명하면 props가 변하지 않는데 side effect에 의해 리렌더링 되는 컴포넌트라면 리렌더링을 막을 필요가 있다. (위 gif처럼 메모란에 타이핑할때마다 사진컴포넌트가 리렌더링 되는 경우) 이럴때는 리렌더링이 불필요한 컴포넌트의 이전 props와 다음 props를 비교하여 , props변화가 없다면 이전 props를 사용하도록 메모이제이션 할 수 있다. 이를 가능하게 하는 것이 React.memo이다. 팀원분이 타이머 업데이트와 페이지 업데이트를 분리하고 싶은데, useMemo로 해결이 안된다고.. 2022. 9. 18. Functional update of setState -> state의 변화가 state를 참조하지 않게 됨 이렇게 숫자가 혼자서 계속 올라가는 것을 만드려면 어떻게 해야 할까?? 시도하다보면 useEffect를 쓰는 쪽으로 생각이 흘러간다. 처음에는 다음과 같이 작성하였다. useEffect(() => { setInterval(() => { setCount(count); }, 1000); }, [count]); return ( {count} setCount(initialCount)}>Reset setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ); 그러니 이러한 버그가 나타났다. 그래서 clean-up함수를 추가해주었다. (clean-up함수가 언마운트시가 아니라, 업데이트시 실행된다는 것을 알 수 있음, 참고.. 2022. 8. 13. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음 반응형
