FindNewThing FindNewThing

기존에는 resize 이벤트 리스너를 호출해서 창이 변할떄마다 창의 크기를 탐지해 조건부 렌더링을 했었다. useEffect(()=>{ const checkMobile = () => setIsMobile(window.innerWidth window.removeEventListener("resize",checkMobile); } ,[])하지만 이렇게 하면 창의 크기가 'resize'될 때마다 호출되기 때문에 요청 폭탄이다. 떄문에 matchMedia라는 것을 사용해서 해결했다. useEffect(()=>{ if(typeof window === 'undefined') return; const mq = window.matchMedia('(max-widt..

요즘 반응형 사이트들은 화면의 전환을 가로가 아닌 세로 스크롤을 통해서 하는게 대부분이다.이럴때 스크롤 이벤트를 적용하려면 기존에는 window.addEventListener("scroll", () => { const pos = window.scrollY; // 각 섹션의 위치 계산 // activeTab 업데이트});이런식으로 각 위치를 스크롤 마다 계산을 했다고 한다. 그러니 얼마나 CPU에 부담이 되었을까 때문에 현재에는 IntersectionObserver방식을 사용한다. 해당 방식은 위에처럼 스크롤마다 호출되는 것이 아닌섹션을 나누어서(뷰포트) 얼마정도가 보여질때(노출 비율) 호출하도록 하는 거라 확실히 부담이 덜하다 [개념 요약]IntersectionObserver 생성자는 두 개의 인자..

순수 함수- 입력이 같으면 항상 같은 출력을 반환하고, 외부 상태를 변경하지 않는 함수- 사이드이펙트가 없는 함수로,--> 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수--> 외부의 상태를 변경하지 않는 함수입니다. 사이드이펙트(부작용)란? 부작용(side effect)이라는 표현이 이름 때문에 부정적으로 들릴 수 있지만,실제로는 '필요하지만 제어되어야 하는 외부 영향'을 뜻하는 중립적인 기술 용어예: 아래는 모두 "부작용"- setState() 컴포넌트 상태 변경 (외부 변화)- console.log() 콘솔에 출력 (외부에 영향)- fetch() / axios.get() 네트워크 요청 (I/O 발생)- DOM 조작 (document.qu..

CSS-in-JS는 자바스크립트(.js)파일 안에서 css를 작성하는 방법이다. CSS-in-JS 방식을 쓰는 여러 라이브러리들이 있는데 대표적으로 styled-components이 있다. 예)const style = { backgroundColor: 'blue', color: 'white',};function Button() { return Click;} 왜 CSS-in-JS가 등장했을까?전통적인 CSS의 문제점:- 전역 스코프: 클래스명 충돌 잦음- 스타일 재사용 어려움: 모듈화, 조건부 처리 불편- JS와 CSS 분리: 컴포넌트 기반 개발 방식에 비효율적 CSS-in-JS는 이를 해결하기 위해 등장한 패러다임CSS-in-JS의 주요 특징특징 설명컴포넌트 스코프 스타일링CSS가 컴..

컴포넌트 props의 리랜더 방지개발을 하다보면 외부 라이브러리 ui를 목적에 맞게 커스터마이징을 해야할때가 있다. Wrapper Component 패턴을 이용해서 커스터마이징을 할 수 있는데, 이때 주의해야할 점이 있다. 예)render={() => } 기존에 이렇게 렌더링이 이어지는 부분을 render ={(props)=>} 으로 수정하고 const WrapperComponent = (props) => ( );이런식으로 커스텀 컴포넌트를 만든다음 대입을 한다.그러나 문제가 있다. ..

JSX 요소를 map함수 안에서반복문으로 반복 렌더링이 될 때 안에 반복되는 요소에 key의 값을 지정해야한다. 가끔 index를 key값으로 지정하는 경우가 있는데, 이러면 요소의 순서가 바뀌거나 변경이 일어났을때 key값은 그대로고 표면적인 값만 변경되어 상태가 꼬인다. key는 React가 DOM을 효율적으로 업데이트하는 데 쓰이는 기준이다.React는 리스트를 렌더링할 때 각 자식 요소에 고유한 key 값을 요구한다.그래서 key값은 고유해야 하며 보통 map함수에서 고유한 id값으로 해야한다.

useRef의 값을 초기화할때와 사용 방법에는 두가지가 있다.1. DOM 참조2. 상태저장/보전(직접 값을 초기화)1번같은 경우에는 같은 DOM 요소에 같이 참조를 걸면 을 렌더링 시, React가 state.current에 해당 DOM 요소를 넣어준다.그러면 state.current.value 같이 DOM요소에 직접 접근해서 값을 다룰 수 있다.2번같은 경우는 state.current = 1; 이런식으로 원하는 값을 설정해서 초기화하고 사용할떄도state.current으로 가져와서 값을 쓴다.때문에 useRef를 어떤식으로 사용할 건지에 따라서 값을 가져오는 방식이 다르니 주의할 것

리액트에서는 변수를 사용할때 useState를 이용해 상태 관리와 리랜더링을 할 수 있다. 하지만 해당 변수의 값변경이 리랜더링이 필요없을 때는 useState를 이용하는건 불필요하다.특정 이벤트가 동작했을 때 useEffect()를 타도록 개발을 하고 있었다. 그렇기 때문에 의존성 배열에 useState를 통한 변수를 넣을지 , useRef()를 통한 변수를 넣을지 고민하다가문득 로컬변수와 useRef()의 차이점에 대해 정리가 명확하게 되지 않았다. 우선 useRef()는 useState처럼 값이 변경됐을때 리랜더링을 발생시키지 않지만, 동일하게 값을 유지하고 관리할 수 있는 리액트 훅이다.그렇다면 로컬 변수 또한 값이 변경됐을 때 리랜더링을 발생시키지 않는데, 그럼 어떤 상황에서 뭘 써야할까? 차이..