솔적솔적

리액트가 업데이트되고 나서 사용할 수 있는 신기능이 있다는데, 그것을 오늘 사용해보려한다. | 1. batch 기능 state변경함수들이 쭉 작성이 되어있다면 state변경이 일어날 때마다 재랜더링이 일어나는데 연달아서 여러개가있다면 재랜더링이 맨 마지막것만 재렌더링 1번만 일어나게하는 것이다. 이게 batch이라고 하는데, 예외가 있다. ajax요청, setTimeout 등의 내부코드라면 batch이 일어나지않았는데, 리액트 17버전에는 배칭이 일어나지않는다. 리액트 18버전이후에는 코드가 어디있던간에 잘 일어난다는 것. | 2. useTransition 동작이 느린 컴포넌트들을 빠르게 동작할 수 있게하는 것이다. import {useState} from "react"; function App2(){ ..

오늘은 성능향상 2탄, 원하는 자식컴포넌트의 재렌더링을 막을 수 있는 방법에 대해서 알아보고자한다. | 재렌더링 막는 방법 자식컴포넌트를 우선 하나 생성해보고, Cart안에 넣어놓는다. function Child() { return 자식컴포넌트 } function Cart(){ return ( ... ... )} state만들기 const [count, setCount] = useState(0) 버튼을 눌러 state변경하도록 하기 function Cart(){ const state = useSelector((state)=>{return state}) const dispatch = useDispatch();//store한테 요청을 보내주는 함수임 const [count, setCount] = useSta..

개발을 하면서 성능개선 힘쓰기에 돌입해보자. 우선 함수나 오브젝트일 경우에는 변수에 담아 쓰는 것이 좋습니다. 이름지어서 사용하는 경우가 좋은 이유는 메모리할당 때문인데, 콜백함수, 오브젝트형식들을 쓰면 사이트 재랜더링, 버튼 누를 때 함수로 쓰면 메모리할당이되어야하는데 성능적으로 문제가 있을 수 있기 때문, 또한 상황에 따라서 애니메이션을 줄 때 사이트에 레이아웃을 변경하거나 margin , width, padding(레이아웃 잡는 속성들)을 변경시키는데, 브라우저가 랜더링을 힘들어한다.(React뿐만 아니라 css자체의 기본 상식) 따라서 애니메이션을 줄 때 transform 속성을 되도록이면 사용하는 것이 좋다. 또한 App.js에 컴포넌트들을 import할 때 자바스크립트는 위에서부터 한줄씩 읽어..