React에서 Parallax 구현하기

리액트는 컴포넌트 단위로 개발을 한다. 그래서 컴포넌트마다 useEffect 내부에 스크롤 이벤트를 바인딩해서 parallax를 구현해야 하나 싶었는데, 스크롤할 때마다 컴포넌트 개수만큼 이벤트 리스너가 동작하면 아무래도 성능에 영향을 미칠 수밖에 없다. 그래서 생각한 첫 번째 방법은 취상위 컴포넌트인 에서만 스크롤 이벤트를 바인딩하고 document.querySelector를 사용해서 DOM을 가져와 parallax를 구현하는 것이었다. 그러나, 리액트는 가상 DOM을 비교해 브라우저에 painting을 효율적으로 하기 위한 라이브러리이므로 document.querySelector를 사용한다는 것은 리액트의 본질을 고려하지 않는 방법이다.(사용하면 안 되는 게 아니라 지양해야 하는 것) 그래서 두 번째..

• format_list_bulleted REACT
• · 2024. 3. 29.
• textsms

리렌더링(Re-rendering)에 대하여

컴포넌트가 리렌더링(Re-rendering)이 되는 경우는 아래와 같습니다. 함수형 컴포넌트를 기준으로 설명합니다. 1. state 업데이트( 컴포넌트에서 사용하는 custom hook의 state 업데이트도 포함) 2. 부모 컴포넌트의 리렌더링시 props 업데이트 3. 전역 상태값(Redux store, Context Api, Mobx Store, Recoil atom 등) 업데이트 state 업데이트 해당 컴포넌트에서 생성된 setter나 dispatch가 실행되면 리액트는 해당 컴포넌트를 렌더링 큐(queue)에 등록하고 이전 state와 현재 state를 비교하여 값이 다를 때 리렌더링이 발생합니다. 조심해야 할 경우가 있다면, state가 참조 타입, 즉 객체일 경우입니다. 이전 state의 ..

• format_list_bulleted REACT
• · 2024. 3. 8.
• textsms

(styled-components) - Warning: Received `false` for a non-boolean attribute

리액트로 개발을 하다가 위 이미지처럼 에러가 발생했다면 그것은 styled-components 라이브러리 때문이다. 왜냐하면, styled-compoenents로 만든 컴포넌트에 props를 전달하면 html의 attribute로써 사용되기 때문이다. 즉, 위 이미지의 에러는 html에 show라는 attribute는 boolean 값을 갖는 attribure가 아니기 때문에 생긴 것이다. (애초에 show라는 attribute도 없지만..) 해결 방법은 아래 코드 처럼 show props에 $(달러) 기호를 사용해서 boolean값을 갖는 attribute라고 선언해주면 된다. import React, { useState, useEffect } from 'react' import styled from ..

• format_list_bulleted REACT
• · 2023. 9. 27.
• textsms