[React] render() 함수

render함수에 대한 궁금증은 오늘 컴포넌트에 관한 리액트 공식문서를 보다가 시작됐다.

함수형 컴포넌트와 클래스형 컴포넌트의 차이에 대해서 공부를 하다가 render함수에 대한 의문이 생겼다.

React 공식문서

위 문서를 보다가 지금까지 예제로 작성해봤던 코드들과 다르게 ReactDOM.render라는 함수가 쓰인것을 보게 되었다. 지금까지는 클래스형 컴포넌트에서 state값을 변경하기 위해서 render함수를 작성하는 것 밖에 없었는데 ReactDOM.render함수는 과연 어디에 쓰이는 것일까?라는 궁금증에 이곳저곳에 찾아보았다.

 

render함수에 대한 공식문서(ko.reactjs.org/docs/react-dom.html#render)를 보게 되었을 때,

ReactDOM.render함수는 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경한다. 

 

결론❗

컴포넌트에 생성하냐, html 태그에 생성하냐에 따라서

전자는 class에서 return, 후자는 ReactDOM.render를 사용

 

사실,,,아직도 완벽하게 이해가 다 안되었다...😭😧

다음에 맑은 정신으로 다시 봐야겠다

 

 

-------------

2023년에 수정 추가하기

 

이 글을 어쩌다가 보게되었는데 너무 창피하다

이때의 나..굉장히 무지했구나..

생각보다 도움안되는 글에 많은 사람들이 찾아주는 것 같아서 글을 내릴까도 생각했지만 이때의 나도 나니까 뭔가 그래도 조금 발전했다는 것을 기록하기 위해 지금의 내가 조금 추가정도만 하겠다.

원래 리렌더링에 대해 글을 쓰려고 했었어서 여기에서는 간단하게 흐름 이해정도만 도와줄 수 있도록 작성하도록 하겠다.

 

이제 렌더함수 같은 경우는 렌더링의 개념을 알면된다.

렌더링은 쉽게 화면에 띄우는 과정이라고 생각하면 된다.

내가 쓴 코드가 화면에 띄워지는 것, 그래서 리렌더링은 쉽게 새로고침이라고 생각하면 조금 이해가 편해졌었다.

 

지금 졸업프로젝트하다가 이걸 쓰고 있었는데 이거 쓰다가는 오늘 하루가 지나갈 것 같아서 일단은 과제 좀 하러 가겠습니다..

투비컨티뉴드..

 

일단 21년에 적어놓은 리렌더링 글을 참고해도 좋을것같아서 아래 글 첨부해놓겠습니당,,

[React] Rerendering(리렌더링)