React : 리액트 작동 원리 이해하기 useState, useMemo, useCallback, react DOM

 

React : 리액트 작동 원리 이해하기

 

---

 

 

React

리액트는 자바스크립트 라이브러리입니다.

리액트의 핵심은 컴포넌트이며, 이런 컴포넌트화 기능을 활용해 화면을 효과적으로 구성하는 역할을 합니다.

 

 

React DOM

리액트 DOM은 웹에 대한 인터페이스입니다.

리액트는 컴포넌트의 상태 관리 라이브러리라고 보아야 하며, 가상 DOM 은 컴포넌트 트리를 결정합니다.

리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재 실행되어 리액트가 이것들을 다시 평가하게 됩니다.

 

핵심

리액트 컴포넌트는 상태나 이 외의 것들에 대해 재평가 되고,

DOM은 과거와 현재의 상태에서 변경되어야하는 부분만을 감지하여 효율적으로 변경해줍니다.

가상 DOM에선 이런 원리로 차이점만을 변경함으로써 바뀐 부분만을 업데이트 해줍니다.

그렇기때문에 상태와 성능적으로 최적화된 환경을 가지게 됩니다.

 

예시

<div>
     <h2>안녕</h2>
</div>

추가 생성된   <p>반갑습니다</p> 부분만을 감지하여 효율적인 관리가 가능합니다.

<div>
     <h2>안녕</h2>
     <p>반갑습니다</p>
</div>

 

 

 

 

컴포넌트 상태관리 알아보기 

자 그럼 이제 상태관리를 어떻게 효율적으로 할 수 있을지 알아보자.

결국 리액트는 상태변경을 DOM에게 전달하고 전달한 DOM 이 App 을 다시 그리게 되면서 감지된 상태를 업데이트 해줍니다.

이와 관련된 부가적인 상태관리 기능들 중에 useState, useMemo, useCallback 을 이해하면 보다 효율적으로 App 을 그리는 프론트개발자가 될 수 있다

 

 

 

👉 useState 상태를 업데이트해줘!

리액트에서 제공되는 useState() 를 사용하여 컴포넌트의 상태를 업데이트 할 수 있습니다.

아래와 같이 사용하는데, 핵심은 해당 DOM 에 그려진 변수를 업데이트 해준다고 생각해주면 됩니다.

const [userState,setUserState] = useState();

 

리액트 DOM 은 처음 DOM이 실행되고 나서 기존의 화면을 스냅샷을 찍어둡니다.

Load 된 상태를 저장해놓고, 상태가 업데이트 되었을때, 업데이트된 화면을 기존에 저장해둔 스냅샷과 비교하여 변경된 부분의 차이점만을 반영합니다. useState 는 상태를 변경해주는 기능을 가지고 있기 때문에, 리액트 내에서 상태를 변경하고 전달하기 위해서 필수적으로 사용해야합니다.

 

useState 를 사용한 경우에는 상태가 바뀌게 되므로 DOM이 재실행 된다는 것을 알아야합니다.

원하지 않거나, 무분별하게 useState 를 사용하게 된다면 무한로딩에 빠지게 되기도 합니다. 

무한로딩에 빠지게 된다면 useState 를 줄여가며 원인이 되는 부분을 찾아 효율적으로 관리해주어야 합니다.😤

 

 

 

👉 useMemo 상태를 저장해줘

상태말고 props 감지해주는 기특한 useMemo 를 소개해보자면 아래코드를 예시로 들 수 있습니다.

import React from 'react';

import My from './My';

const Demo = (props) => {
	return <My>{props.show ? 'this' : ''}</My>
}

export default React.memo(Demo}

 

useMemo 는 React.memo() 안에들어간 인자의 props 를 감지하여 업데이트 되었을대만 인자 컴포넌트를 재실행 및 재평가합니다. 부모의 컴포넌트가 바뀌었지만 전달받은 props 가 변하지 않았다면 컴포넌트 재실행을 건너뜁니다.

한마디로 props 에 의존해서 상태를 변경하기 때문에, 재실행에 따른 불필요한 렌더링을 방지합니다.

 

 

* 직관적으로 이해할 수 있는 코드 🤓

const Demo = (props) => {
	const router = useRouter()
	
    // router 를 감지해 test 안에 값을 저장해줄 수 있다.
	const test = useMemo(()=> {
            return router.query.search
        },[router]) // 2번째 인자로 router 감지

    
    // query.search 출력
	return <My>{test}</My>
}

export default React.memo(Demo}

 

 

 

 

👉 useCallback 재생성을 방지해줘

변경이 되어서는 안되는 함수들을 useCallback에 담아주면 함수 저장함수, 함수를 저장함으로써 재생성을 방지해준다.

const toggle = useCallback(() => {
	setShow((el)=>!el))
},[의존성함수]);

App 컴포넌트가 다시 렌더링 되는 상황이 와도 해당 useCallback 내부에 쓰인 함수는 변하지 않아, props 기반으로 움직이는 컴포넌트에 영향을 주지 않게 된다. 

 

 

의존성/종속성

const toggle = useCallback(() => {
	// allow 상태값에 따라 변동사항 있음
	if(allow){
		setShow((el)=>!el))
    }
},[allow]); // 2번째 인자로 변동인자를 넣어준다