솔적솔적

오늘은 성능향상 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할 때 자바스크립트는 위에서부터 한줄씩 읽어..

서버랑 통신하는 코드를 ajax로 짜다보면 여러 기능들이 추가적으로 필요해지게 되는데, 앞서 말했듯이 ajax성공 시와 실패시의 경우나 실패 시 몇초 후에 요청을 재시도 할 수도 있는 경우, 다음페이지 내용을 미리 가져오는 것이나, 몇초마다 자동으로 ajax가 생행되는 것들이 있다. 위의 기능들을 코드를 끄적끄적하여 만들 순 있지만 더 간편하게 할 수 없을까? 라고 생각한다면 그 방법은 있다. 바로 리액트 쿼리되시겠다. 리액트쿼리 라이브러리를 사용하면 위의 기능들을 더 쉽게 적은 코드로 구현이 가능하다. 이 React Query는 자주자주 사용되어지는 것이아니라, SNS나 돈거래소, (코인, 주식)이런 실시간데이터들을 계속 가져와야하는 경우 사용하는 게 좋다. 그럼 이 React Query를 사용해보자...

Redux에서 state를 변경하는 방법을 알아보자. 제일 먼저 state 수정해주는 함수를 만들고 함수를 실행해달라고 store.js에 요청해야한다. 1. state 수정하는 함수만들기 : reducers등장 const user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ //--> 위의 state를 수정하는 함수를 요기다가 만드는 것 return 'sol' + state } } }) 2. 함수 만든 것을 사용할 수 있게 export해줘야함 const user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(..