본문 바로가기

react2

React) useEffect에 대해 알아보자 React를 다시 복습 중에 한번 정리가 필요한 것 같아서 글을 써 보려 한다. const App = () => { const [count, setCount] = useState(0); console.log("rendering"); const add = () => { console.log("add"); setCount(current => { return current+1 }); }; const minus = () => { console.log("minus"); setCount(current => { return current-1 }); }; useEffect(() => { console.log("component render"); return () => { console.log("component end.. 2021. 10. 6.

React) 불필요한 렌더링을 없애보자! 리액트에서 setState가 호출될 때 마다 렌더링이 일어난다. 과도한 렌더링은 페이지 성능 저하를 야기할 수 있다. 따라서불필요한 렌더링을 최소화 할 필요가 있다. Class를 사용하는 경우 1. shouldComponentUpdate() shouldComponentUpdate(nextProps, nextState, nextContext){ if(this.state.counter !== nextState.counter){ return true; } return false; } shouldComponentUpdate()를 이용해 렌더링이 발생하는 조건을 설정할 수 있다. 위의 코드에서는 state의 counter 변수의 값이 변경된 경우에만 렌더링이 일어나도록 하고 있다. 2. PureComponent .. 2021. 6. 28.

이전 1 다음

티스토리툴바