Reconciliation, 리액트 작동

null·2022년 7월 12일
0

리액트 작동 과정.
render() 호출해.
render() 하면 react에서 사용하는 타입의 컴포넌트를 생성.
이 컴포넌트는 이제 react에 마운트(dom에 적용한다.) 하기 위해서 여러 일을 해.
constructor() 메서드도 실행하고. componentWillMount() 메서드 실행기본 스타일 이벤트를 등록을 해준다. 여기가 이제 virtual dom 그려주는 과정이었어.
이 다음에 뭐야. Reconciliation 작업을 해줘 이건 뭘까?

리액트는 state값이 변경 되거나 부모 컴포넌트라 렌더링 될 때 리렌더링 하게 되지.
근데 리액트의 장점은 뭐냐. 바로 가상돔. Virtual Dom.
업데이트 된 요소와 DOM 비교를 해서 변한게 있다면, 고 것을 DOM에 새로 그려주는 것. 그걸 Reconciliation.

virtual dom은 왜 생겼을까?
변경 하는 거 자체는 느리지 않아. 근데 이 요소들을 다시 렌더링 해서 UI를 업데이트 해줘야해. 그러니 이때 UI 구성 요소가 많아지면? 죤나 느려지는거지..

  • DOM은 돋휴먼트오브젝모델. HTML요소등을 스크립트, 프로그래밍 언어로 연결 해주는 API>

아래 글을 참고해서 공부하며 누군가에게 설명한다는 생각으로 적은 글입니다. 디테일한 건 아래글을 가서 보시오.
https://velog.io/@syoung125/eact-Reconciliation%EC%9D%B4%EB%9E%80-virtual-DOM-%EB%A6%AC%EC%95%A1%ED%8A%B8%EA%B0%80-%EC%84%A0%EC%96%B8%EC%A0%81

profile
개발이 싫어.

0개의 댓글