IT/react32 React - memo 배경 부모와 자식 컴포넌트가 존재 한다고 가정하자. 부모의 상태가 변경되면 자식 컴포넌트는 리렌더링이 된다. 부모 컴포넌트가 리렌더링이 되어도 만약 자식 컴포넌트가 받는 prop이 동일하다면 비효율적으로 리렌더링이 되고 있는 것이다. 이 상황에 memo를 사용하면 효과를 볼 수 있다. 개념 prop이 변경 될때마다 렌더링하게끔 도와준다. 메모리 어딘가에 컴포넌트를 저장한다. HOC (High Order Component) 이유 불필요한 렌더링을 최소화 할 수 없을까? useCallback과 useMemo와 함께 불필요한 렌더링을 최소화 해보자 주의 꼭 필요할 때 memo를 추가하면 메모리 어딘가에 저장되기 때문에 꼭 필요할 때 사용해야한다. React는 memo를 안해주어도 충분히 빠르다. prop ch.. 2023. 6. 22. React - flushsync 들어가기 전, Batching 개념 React 18에서 많은 상태를 업데이트 하여도 단 한번만 리렌더링 됨 console.log("Hello react") // 한번만 호출 function handleClick() { setIndex(3) // 리렌더링 안함 setList([]) // 리렌더링 안함 // 리렌더링 함 } flushsync 개념 위의 코드에서 setIndex 이후 setList가 실행되기 전에 index 값을 DOM에 리렌더링 시키고 싶을 때 사용 function handleClick() { flushSync(() => { setIndex(3) }) setList([]) } 2023. 6. 22. React - Virtual Dom 개념 실제 DOM과 같은 내용을 담고 있는 복사본 이 복사본은 자바스크립트 객체 형태로 메모리 상에 저장되어 있다. 존재 이유 기본적으로 브라우저는 DOM을 업데이트하기 위해서 수 많은 일들을 최소화하기 위함 DOM 업데이트 과정 1. 변경될 요소를 찾는다. 2. 찾은 요소와 자식 요소를 제거 3. 새로운 요소를 추가 4. CSS 계산 5. Layout정보를 알맞게 수정 요소가 tree로 저장되어 있어서 탐색과 추가 및 삭제는 빠르게 진행된다. 하지만 브라우저에 새롭게 그려주는 작업은 꽤나 복잡하다. N가 수정되면 N번 브라우저를 새롭게 그러주는 작업을 해줘야 해서 비효율적이다. 특징 리엑트는 항상 두개의 virtual dom을 갖고 있다. 첫번째는 변경 이전의 내용을 담고 있고, 두번째는 변경 이후에 .. 2023. 6. 22. React - List Key의 중요성 이유 보통 key를 index에 의존하는 경우가 많은데 이건 큰 이슈를 불러이르킨다. list 추가 삭제할 때 추가 및 삭제 할 때 리스트의 고유 키가 변경되면서 리스트의 모든 요소가 다시 만들어 진다. 이로 인하여 성능 최적화가 안된다. key가 잘 설정 되어 있다면 추가 및 삭제 시 해당되는 요소만 UI에 반영된다는 걸 브라우저 콘솔에서 확인 할 수 있다. list 안에 어떤 state 값이 존재 할 때 리스트가 index 기준으로 나열 되어 있고 첫번째 요소 안에 input value가 있다고 가정해보자. 요소가 첫번째에 추가되면 input value가 두번째가 아니라 첫번째에 저장되어 있다. debugging도 안되기에 이유를 찾기 싶지 않을 것이다. 존재 이유 기본적으로 브라우저는 DOM을 업데.. 2023. 6. 22. React - batching 개념 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것 이유 기존에는 각 state가 변경될 때마다 re-renderning이 발생하여 불필요하게 re-rendering이 많이 발생했다. function App() { const [count, setCount] = useState(0); const [active, setActive] = useState(false); function handleClick() { setCount((c) => c + 1); //Nothing happens setActive((f) => !f); //Nothing happens //rerender component after this function runs. this is batching. } r.. 2023. 6. 22. React - Ref 에러 잡기 에러 문구 client.js:1 Warning: React does not recognize the videoRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase videoref instead. If you accidentally passed it from a parent component, remove it from the DOM element. 원인 useRef의 변수를 자식 컴포넌트의 prop으로 넘길 때 videoRef라는 속성으로 넘겨서 생긴 이슈 해결 방법 해당 자식 컴포넌트를 fowardRef로 감싸고, ref속성으로 videoR.. 2023. 6. 18. 이전 1 2 3 4 5 6 다음
