본문 바로가기

Web/React8

리액트의 메모이제이션 (useMemo, useCallback, React.memo) 리액트는 컴포넌트를 기반으로 동작한다. 컴포넌트는 props, state, context 등의 변경이 감지될때 변경 내용을 반영하기 위해서 재연산, 재성성을 진행하고 재렌더링 된다는 특징을 가지고 있다.이러한 특징은 UI의 일관성을 유지하고 사용자 경험을 개선 하거나 코드의 간결화, 예측 가능성 향상 등등의 장점들을 가지고 있지만 작성한 코드의 내용에 따라 불필요한 재렌더링이 자주 발생하여 성능에 악영향을 줄수도 있다. 성능저하를 최소화하기 위해서는 메모이제이션을 활용해야한다. 아주 쉽게 말하자면 "수정할 필요가 없는 부분은 냅둬라" 이다. 리액트의 불필요한 재연산, 재생성, 재렌더링을 방지하기 위한 기능은 여러가지가 있지만 여기서는 메모이제이션, 그 중에서도 useMemo와 useCallback, Re.. 2024. 10. 31.
React의 key (Diffing 알고리즘과 framer-motion) 처음 React 개발을 시작하고 key값을 신경쓰지 않은채로 수많은 컴포넌트들을 집어넣다보면 key와 관련된 경고문을 볼 수 있다. React에서 key값은 매우 중요하게 사용된다.컴포넌트 식별 및 업데이트 최적화 (Diffing 알고리즘)framer-motion 등 라이브러리에서의 컴포넌트 구분  1. 컴포넌트 식별 및 업데이트 최적화React가 컴포넌트를 생성하고 제거할때 개발자가 JSX 상에 마크업한 위치를 기준으로 작동하는것이 아닌 UI 트리에서의 위치를 기준으로 작동한다.export default function Test() { const test = true; if (test) return ; return ;}function ComponentTest({ name }: { nam.. 2024. 10. 23.
Styled-Components의 transient props ($ 기호로 prop 사용하기) * Styled-Components란?React 개발에서 styled-components를 사용하면 html 태그와 스타일(css)속성을 하나의 컴포넌트로 묶어 사용할 수 있게 되어 요소 하나하나의 스타일 관리를 조금 더 체계적으로 할 수 있다.컴포넌트 기반으로 관리되므로 일반 React 컴포넌트와 비슷하게 props를 전달하여 여러가지 조건과 변수에 따른 동적 스타일링이 가능하다는 장점이 있다.또한 CSS-in-JS의 특징을 자연스럽게 가지게 되므로 HTML, CSS, JS를 한곳에서 관리하게 되어 유지보수성와 컴포넌트 재사용성이 증가한다.  styled-components로 개발을 하다보면 정상적으로 작동을 하고있음에도 아래와 같은 경고가 발생할때가 있다.React does not recognize .. 2024. 6. 27.
JSX의 마우스 over, enter, out, leave와 이벤트버블링 더보기상단바를 제작하고 특정 항목에 마우스를 가져다대면 상단바가 확장되면서 해당 메뉴에 맞는 하위항목을 보여주도록 만들고있었다. 그리고 다시 확장된 상단바 영역에서 마우스가 빠져나가면 하위메뉴가 사라지고 상단바는 원래의 크기로 돌아가도록 구현하고있었다.그런데 분명 상단바에 마우스이벤트를 등록했음에도 상단바 영역이 아닌 특정 항목을 빠져나가기만 하면(항목 => 상단바 영역으로 마우스 이동) 이벤트가 감지되어 상단바 크기가 원래대로 돌아갔다. 이는 이벤트 버블링 현상 때문이다.마우스커서를 가져다댈때의 동작은 onMouseOver, onMouseEnter를 사용할 수 있고,마우스커서가 빠져나올때의 동작은 onMouseOut, onMouseLeave를 사용할 수 있다. 동일한 동작임에도 각각 두개의 이벤트핸들러.. 2024. 5. 19.
JSX에서 조건문 사용하기 React 내의 JSX 안에서는 if문을 사용할 수 없다. JSX내에서 if문을 사용할 수 없는 이유 JSX내에서는 표현식만 사용가능하다. 먼저 자바스크립트에서 실행 가능한 코드줄을 문(statement) 이라고 부른다. 문 중에서도 값으로 평가될 수 있는 문을 표현식(expression)이라고 부른다. ● 표현식에 해당하는 문 : 명확한 값이 반환되어 값으로 평가가 가능하다. let a = 3; true ? true : false ● 표현식이 아닌 문 : 명확한 값이 반환되지 않고 실행문 등을 포함한다. if ( true ) { console.log("true"); } else { console.log("false"); }​ 이외 for 반복문 등... 개발자가 JSX내에 작성한 코드는 변환 과정을 거.. 2024. 4. 17.
무한스크롤 : IntersectionObserver와 useRef 검색결과 등과 같이 방대한 양의 데이터를 화면에 표시하고 싶은 경우가 있다. API요청등을 통해 수많은 결과를 한번에 가져오고 화면에 표시하면 프로그래밍 난이도는 낮아지겠지만 여러가지 문제점이 발생한다.과도한 DOM 노드 수 증가에 따른 성능 저하메모리 사용량 증가 (성능 저하)네트워크 리소스 과부하사용자 경험을 고려하지 않은 비효율적인 데이터 처리이러한 문제를 해결하기 위해서는 페이지를 나누는 방법도 있지만 사용자경험 향상을 위해서 무한스크롤을 사용해볼 수 있다. IntersectionObserver무한스크롤 기능을 구현할때 IntersectionObserver를 사용하면 성능 저하를 최소화하여 간단하게 구현해 볼 수 있다.const [movies, setMovies] = useState([]);con.. 2024. 4. 14.
useState의 setter함수와 함수형 업데이트 React는 최적화를 위해 가까운곳에서 여러개의 state변화가 일어날경우 이를 일괄처리하여 최종결과를 렌더링해준다. 이를 React의 automatic batching이라고한다. 개발자의 의도대로 실행이 완료되지 않은채 렌더링이 진행되거나 너무 많은 수의 렌더링이 진행되어 성능이 저하되는것을 막기위한 기능이다. 하지만 automatic batching 기능을 모른채로 개발을 하다보면 예상치못한 문제를 만날 수 있다. 직접적 상태 업데이트 const [count, setCount] = useState(0); const onClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( {onClick()}}.. 2024. 4. 14.
useRef : 리액트 렌더링과 비동기적인 작업 처리 리액트는 가상 DOM 끼리의 비교작업을 통해 수정된 부분을 파악하고 필요한 부분을 재렌더링 한다. 웹캠 영상 같은 프레임단위로 처리되어야 할 요소의 경우 기존 렌더링 과정과 별개로 처리되어야 한다. 가상 DOM이 아닌 실제 DOM을 직접 컨트롤 하여 리액트 렌더링과 비동기적으로 처리되어야 하는 작업은 useRef라는 React Hooks를 사용한다. 비디오 영상을 다루기 위해서는 useRef를 사용하여 html요소에 접근하고 원하는 위치에 영상을 표시할 수 있다. 2023. 10. 29.

티스토리툴바