setState() setState()는 리액트의 함수형 컴포넌트에서 상태를 변경하기 위해 사용되는 hook useState()를 통해 반환되는 함수라고 할 수 있다. setState()의 특징 1. 비동기 동작이다. 2.연속적으로 호출 setState() 호출 시 BATCH(일괄) 처리가 된다. 3.단순히 state 객체를 넘겨줄 수도 있지만 함수형으로 새로운 state를 인자로 넘겨 줄 수 있다. setState()의 연속사용? 리액트에서 state가 변경되면 변경되기 이전의 state로 구성된 element tree와 변경 이후의 state로 구성된 element tree를 비교하여 변경된 부분을 감지하여 DOM에 적용하게된다. 그런데 리액트 내부적으로 이 과정에서 setState() 가 연속적으로..
React
ref와 state의 차이 state를 변경하면 자동으로 컴포넌트가 렌더링 된다. 함수형 컴포넌트는 말 그대로 함수이다. 따라서 리렌더링이 된다는 것은 말 그대로 함수가 다시 불려지게 되고 컴포넌트 내부 변수들이 초기화 된다. 반면 Ref는 값이 변경되어도 렌더링이 발생하지 않는다. 또한 리렌더링시 값이 유지된다. 이에 따라 ref 값이 변해도 컴포넌트 내부의 변수들이 유지가 된다. 언제 사용하면 좋을까? 1. 값을 변경했을 때 렌더링이 되지 않았으면 할 때 2. state변화 등에 의해서 리렌더링시 값을 유지시키고 싶을 때 3. 특정 DOM 요소에 접근하고 싶을때 => ex) 렌더링시 input의 focus를 주고 싶을 때 state의 값을 업데이트 할 떄와 ref의 값을 업데이트 할 때의 렌더링 유무..
useReducer는 무엇인가? 1. useReducer는 컴포넌트의 state를 관리할 수 있는 리액트 훅이다. 2. useReducer는 useState의 대안이기도 하다. state값이 { title: " ", desc: " ", price: 0, category: " ", tags: [], quantity: 0, } 이런식으로 되어있고 이를 일반적인 useState hook의 setState로 변경한다고 생각해보자. 현재의 컴포넌트에서 저렇게 많은 값을 관리하자니 코드가 굉장히 복잡해질 것이다. 거기다 non-primitive한 객체나 배열에 대해서는 {...state, ~} 이런 식으로 불변성 관리까지 더불어서 값을 수정해주어야한다. 즉 더욱 복잡해질 것 이다. 이를 useReducer로 해결 ..
프롤로그 React-router-dom의 Link 를 사용하면 페이지 이동이 가능하다. 페이지 이동과 더불어 state를 함꼐 전달하고 싶을 때가 있다면 useNavigate를 이용하자. 아래의 버튼 클릭시 1. 자세히 보기 버튼을 클릭시 /service 페이지로 이동하게 된다. 2. state를 전달한다. import { Link, useNavigate } from 'react-router-dom'; const Section1 = () => { const navigate = useNavigate(); return( navigate('/service', {state: {selector: '#service-section1.section1', tabIndex : 1},})}> 자세히 보기 ) } export..
원인 React-router-dom을 이용시 페이지를 이동할 때 마다 이전에 방문했던 페이지이면 스크롤의 위치가 마지막 위치에서 머무르는 현상 발생 페이지 이동시 항상 맨위에 스크롤이 위치해있게 하고 싶었다. 해결 ScrollTop 컴포넌트 생성 후 아래와 같이 코드를 작성한다. 페이지가 다를때 마다 useEffect 내부 함수를 실행 import React, { useEffect } from 'react' import { useLocation } from 'react-router'; const ScrollTop = () => { const location = useLocation(); useEffect(() => { window.scrollTo(0, 0) }, [location]) return null..
useRef를 이용해서 SearchResult라는 div 엘리먼트에 접근 document에 onCheckClickOutside함수를 가진 이벤트리스너를 달아준다. onCheckClickOutside 함수는 DropDown 메뉴가 열렸을때, searchRef에 이벤트가 주어지지 않을 때를 제외하고 전 영역을 클릭시 DropDown 메뉴가 닫힌다. const searchRef = useRef(null); const onReset = useCallback( () => { setSearchValue(''); setOpenDropdown(false); }, [], ); useEffect(() => { const onCheckClickOutside = (e:MouseEvent) => { //!searchRef.c..
