[항해99 / TIL] 🚢 23-04-15 chatGPT에게 리액트 기초 물어보기

 

리액트 기초 개념을 정리하다 궁금한 것들이 생겨 메모장에 정리하고 있었다. 그러다 아, chatGPT한테 물어보면 기다릴 필요 없이 바로 질문할 수 있겠군 싶어 이것저것 물어보았다. 대답에 또 궁금한 게 생기면 꼬리에 꼬리를 물고 질문해보기도 하고 정말 궁금했던 것들을 물어보기도 하고.

 

 

 

 

---

1. Virtual DOM을 초보자가 이해할 수 있도록 쉽게 설명해줘

 

 

어제 브라우저 렌더링의 결과물인 DOM에 대해 공부하고 리액트의 Virtual DOM과 무슨 차이가 있는 건지 계속 헷갈려서 질문했다. 더 효율적인 렌더링을 위해 VDOM을 쓴다는 건 알겠는데 그래서 정확히 어떻게 하는지!

 

 

 

---

2. 리액트에서 VDOM이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니?

 

 

항상 궁금한 성능 관련 질문. 역시 VDOM도 자주 리렌더링되면 안 좋구나.

 

 

---

3. 리액트 생명주기와 VDOM은 어떤 관계가 있어?

 

 

이 부분이 이해가 잘 안 가서 계속 추가 질문을 했다.

 

 

 

---

4-1. 리액트의 생명주기에 대해 초보자가 이해할 수 있도록 쉽고 자세하게 설명해 줘

 

 

 

 

---

4-2. 대답을 이해하는데 도움 되는 도표나 사진이 있으면 알려줘

 

 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

 

 

 

---

5. 리액트의 생명주기가 종료된다는 게 정확히 어떤 걸 의미하는 거야?

 

 

 

 

---

6. 리액트 컴포넌트의 생명주기가 종료되면 GC이 동작해?

 

 

 

 

---

7. 리액트 컴포넌트의 생명주기가 종료되면 그것도 VDOM에 반영되어 리렌더링되니?

 

 

생명주기가 종료되면 (unmount) VDOM에서 해당 컴포넌트의 노드를 삭제하고, 상태나 속성이 변경되지 않았으므로 VDOM에서도 해당 컴포넌트를 없는 것으로 처리한다. 여기까지 들으니 이해가 갔다.

 

 

---

8. 상태 변경에 따른 VDOM 반영과 리렌더링에 대해 내가 이해한 게 맞아?

 

 

 

 

---

9. 브라우저가 렌더링 될 때 리액트 라이브러리를 사용했을 때도 AST를 만들어?

 

 

어제 브라우저 동작 원리를 계속 봐서 그런가 관련된 질문을 계속하게 된다. 리액트가 SPA여서 뭔가 다를까? 했는데 그냥 라이브러리일 뿐이므로 똑같이 AST를 생성한다고 한다.

 

 

---

10. 왜 리액트에서는 addEventListenr보다 onClick 등이 더 권장되는 거야?

 

 

처음에 addEventListener로 이벤트를 걸었는데 뭔가 의도한 대로 동작되지 않았어서 남긴 질문. 바닐라JS를 공부할 때는 HTML 내에 onclick 등을 쓰는 걸 되도록 지양하고 addEventListener를 사용했는데 리액트에서는 onClick 등의 이벤트 핸들러가 더 권장된다고 한다!

 

 

 

---

11. addEventListenr같은 이벤트와 onClick같은 이벤트 핸들러의 차이점이 뭐야?

 

 

 

 

---

12. 이벤트 핸들러(props)를 조금 더 쉽게 설명해 줘

 

 

onClick 등의 핸들러는 클릭할 때 호출, addEventListener는 해당 요소를 지켜보다가 이벤트를 감지한다고 이해했다.

 

 

---

13. 리액트를 사용해서 웹을 만들었을 때 브라우저 렌더링이 어떻게 이루어지는지 자세히 알려줘

 

 

며칠 전에 본 아티클 제목으로는 성능과 관련해서 React Memo 사용을 지양해야 한다고 했는데 이 부분에 대해서는 뒷부분을 더 공부하고 물어봐야 할 것 같아서 추가적으로 질문하지 않았다.

 

 

---

14. jsx가 뭐야? html과 xml이 합쳐진 거야?

 

 

 

 

---

15. xml과 html의 차이점을 알려줘

 

 

input 태그를 사용하는데 셀프 클로징 태그를 사용하지 않으면 에러가 나길래 대체 왜인지 궁금해서 물어본 질문!

 

 

---

16. xml은 언제 사용해? FE 개발자가 xml 파일을 직접 만들기도 해?

 

 

 

 

---

17. xml은 json과 비슷한 거야?

 

 

 

 

---

18. xml로 만들어진 코드의 예시를 보여줘

 

 

 

 

---

19. xml은 객체와 비슷하다고 봐도 돼?

 

 

 

 

---

20. jsx에서 self-closing tag를 써야 하는 이유는 jsx가 js와 xml를 합친 문법이기 때문이야?

 

 

 

 

---

 

✅ 궁금한걸 정말 못 참는 성격이라 공부할수록 궁금한 내용은 많아지고 시간은 한정되어 있고 어떡하지 싶었는데 chatGPT를 잘 이용하면 어느 정도 해결이 가능하겠다는 안도감이 든다. 대신 부정확한 내용이 있을 수 있으니 앞으로 쭉 공부하며 해당 내용들이 정확한 내용인지 더블 체킹하기 위해 블로그에 기록해 둔다.

 

---

[참고 자료]

https://chat.openai.com/