REACT- 성능개선2, memo, useMemo 불필요한 재렌더링은 저리가!

오늘은 성능향상 2탄, 

원하는 자식컴포넌트의 재렌더링을 막을 수 있는 방법에 대해서 알아보고자한다.

 

| 재렌더링 막는 방법 

자식컴포넌트를 우선 하나 생성해보고, Cart안에 넣어놓는다.

function Child() {
	return <div>자식컴포넌트</div>
}


function Cart(){
    return (
        <>
                <Child><Child/>
                ...
                ...

)}

 

state만들기 

const [count, setCount] = useState(0)

버튼을 눌러 state변경하도록 하기

function Cart(){ 

    const state = useSelector((state)=>{return state})
    const dispatch = useDispatch();//store한테 요청을 보내주는 함수임

    const [count, setCount] = useState(0)

    return (
        <div>
            <Child count={count}/>
            <button onClick={()=>{ setCount(count +1)}}>+</button>
            <Table>
               
            -- 중간 코드 생략 -- 
    )
}

버튼을 클릭하면 count가 1이되며 Cart라는 컴포넌트가 재랜더링될 것이다.

 

그 때 Cart안에 있는 자식 컴포넌트들도 다 재렌더링된다.

뭐.. 놔둬도 괜찮지만 계속놔두게된다면 나중에 성능저하를 불러들이게 될 것이다.

 

예를 들어서 방금 만든 <Child /> 컴포넌트가 랜더링 시간이 엄청 오래걸리는 저성능 컴포넌트이라고 쳐보자.

그러면 간단한 버튼을 누를 때마다 지연시간이 발생되어져진다.

 

이게 싫다하면 꼭 필요할 때만 재렌더링하게할 수 있다.

Child라는 컴포넌트를 만들때 memo라는 함수안에 담아서 만들면된다.

 

| 꼭 필요할 때만 재렌더링하게 memo()를 사용하자

컴포넌트 만드는 문법을 다르게 작성하여

const Child = memo(function(){
    console.log('재랜더링됨')
    return <div>자식임</div>
})

컴포넌트 함수를 memo로 감싸기

 

 

| Memo( )의 원리 그리고 마구잡이로 사용하면 안되는 이유

그냥 재렌더링을 막아주는 것이아니라 특정 상황에서만 재렌더링을 해주는 것이다.

Child라는 컴포넌트로 전송되는 props가 변할 때만 실행되어지는 함수인 것이다.

 

근데, memo()이거 좋은데? 생각하여 여기썼다가~저기썼다가 마구잡이로 또 쓰면 안되는 것이,

memo()로 감싸놓은 컴포넌트는 항상재렌더링이 되기 전에

기존 props, 신규 props와 비교작업이후 재렌더링 여부를 결정한다.

 

props가 길고 복잡하다면 오랜시간이 걸리는단점이 있다.

따라서 꼭 필요한 무거운 컴포넌트에만 사용하는 것이 좋다.

 

그리고 memo와 유사하게 생긴 useMemo()도 있는데, 이것도 재렌더링을 막는 것이긴한데 

깊숙히 어떤 것인지 알아보도록하자.

 

| useMemo 사용법 

function testUsememo(){
    return  반복문으로 몇천번돌린 결과
  }
  
  
function Cart(){ 

    let result = testUsememo();

하면 Cart라는 컴포넌트가 재렌더링될 때마다 몇천번 돌려진 결과를 진행하게된다.

버튼한번 띡 눌를 때마다 말이지, 비효율적이다. 

 

 

const result = useMemo(()=>{ return testUsememo() }, [state])

useMemo()는 useEffect와 사용법이 거의 동일한데,

함수하나를 return 해줄 수 있는데 Cart컴포넌트가 처음 딱 렌더링될 때만 실행되고 그 이후에는 실행되어지지않는다.

컴포넌트 렌더링 시 1회만 실행해주는 것.

[ ]안에 state를 넣어준다면

이 [ ]안에 넣어둔 state가 변화할 때만 코드가 실행되도록된다.

 

 

근데 굳이 memo와 useMemo를 왜 나눠놨는가허면

 

 

| useEffect() 와 useMemo() 차이점 

useEffect()는 html이 다 실행이 끝나면 실행되나

useMemo()는 렌더링될 때 만든 useMemoTest()가 실행된다.

실행시점의 차이밖에 없다는 것.