[REACT] React 렌더링 과정?

처음 리액트 렌더링에 대해 생각하게 된 계기는 다음과 같았다.

const [val, setVal] = useStats(0)

function foo(){
     setVal(val+1) ;
     setVal(val+1) ;
     setVal(val+1) ;
}

맥락이 위와 같은 코드를 짜고 대단히 오류가 났다.

답은 무엇일까?
왜 위에 코드가 문제가 생길까?
이것과 관련한 답은 "틀리면서 공부하는.."코너에 나와있으니
여기에서 확인하기 바란다.

여튼간 "state가 바뀌면 새로 랜더링 된다고 한다"라는 사실만을 믿고 코드를 짜는 것은
이러한 오류를 낼 수 있다는 생각에 리액트가 언제 다시 랜더링되는 지를 조금 알아보게 되었다.

 

.jsx는 어떻게 렌더링될까?

리액트는 업데이트가 된 부분만 다시 그리기를 하게 된다.

이는 단순하게 표현하면
"이전의 컴포넌트 트리"와 "변경된 컴포넌트 트리"를 비교하여
바뀐 부분만 다시 그리는 것이다.

때문에 setState를 실행하게 된다면

1. 변경된 컴포넌트 트리를 만든다. = Render Phase
2. 해당 변화를 돔에 적용시킨다. = Commit Phase
   과정을 거친다.

여기서 변경된 컴포넌트 트리를 만드는 과정을 조금 더 구체적으로 본다면 아래와 같다.

1. .jsx에서 반환한 태그는 아래와 같은 코드로 볼 수 있다.

const element = {
    <button type="submit"> push </button>
}

2. 1번의 코드를 리액트에서는 React.creatElement로 바꾼다.

const element = React.creatElement{
    button              //type
    {type:"submit"}     //props
    push                // children
}

3. 2번의 코드는 ReactElement가 된다.

// 단순하게 표현
const element = {
    type: button              
    props: {
        type:"submit"
        children: "push"
    }  
}

 

하지만 모든 컴포넌트가 이 과정을 거치는 것은 아니다.

내가 참고한 사이트에서는 "render"를 화면에 그린다는 개념이 아닌 컴포넌트에게 "어떻게 띄워지고 싶은지" 묻는다는 개념으로 보았다.

그런 개념으로 본다면 모든 컴포넌트가 state가 바뀌었다고 "렌더링-ReactElement의 수집-"이 되는 것은 아니다. 아래의 기준에 맞는 컴포넌트가 렌더링 대상이다.

1. setState나 dispatch함수를 통해 state가 변경되었을 때의 해당 컴포넌트
2. 부모 컴포넌트가 렌더링될 때 자식 컴포넌트
3. key라는 prop이 변경되었을때 해당 컴포넌트

이를 이용해서 key를 변경해서 컴포넌트를 업데이트시키거나 혹은 더 추가적으로 깊게 들어가서 부모 컴포넌트가 렌더링되어도 자식이 렌더링되지 않게 막을수도 있다.. 이후의 내용은 참고사이트를 참고하길 바란다.

 

리액트 갈길이 멀다..

아직은 리액트에 대해 많이 모르지만 렌더링 과정을 공부하며 이걸 이용해 최적화를 고려할 수 있겠다는 생각이 들었다.

더불어서 위 과정말고도 useState는 클로저 개념을 이용한다는 점, 리액트의 이벤트는 이미 이벤트위임을 하기 때문에 따로 이벤트 위임처리하는 것은 의미가 없다는 것 등 바닐라 자바스크립트로 돔을 그리는 과정과 굉장히 달라 리액트로 개발을 하기 위해서는 리액트가 어떤 방식으로 실행되는지를 알아야겠다고 생각했다.

 

 

---

참고사이트

https://velog.io/@zad1264/React-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B9%8A%EC%9D%80-%EC%9D%B4%ED%95%B4-1-React%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

React 렌더링에 대한 깊은 이해 [1] - React의 기본 동작 원리