UI 랜더링 및 Javascript로 업데이트하기 | React

유저 인터페이스(User Interface, UI)를 랜더링하고 업데이트하는 방법을 알아봅니다.

---

React가 어떻게 동작하는지 이해하기 위해, 먼저 브라우저가 UI를 만들기 위해 코드를 어떻게 해석하는지에 대한 기본적인 이해가 필요합니다.

유저가 웹 페이지를 방문하면 서버는 브라우저에게 아래와 같은 HTML 파일을 반환하고,

브라우저는 HTML을 읽고 DOM(Document Object Model)을 생성합니다.

HTML 구조 <출처:Next.js React Foundations>

 

DOM이란? What is DOM?

DOM(Document Object Model)은 HTML 요소들을 객체로 표현한 것입니다.

코드와 UI 사이를 연결하고, 부모-자식 관계인 트리 구조를 갖고 있습니다.

DOM 구조 <출처:Next.js React Foundations>

DOM 메소드와 javascript를 통해 유저의 이벤트를 listen하고 UI 안의 특정 요소를 검색, 추거, 수정, 삭제하는 DOM을 수정할 수 있습니다.

DOM으로 특정 요소를 타겟팅하고 스타일과 콘텐츠 또한 변경할 수 있죠.

---

Javascript로 UI 업데이트하기 Updating UI with Javascript

명령형 vs. 선언형 프로그래밍 Imperative vs. declarative programming

UI가 어떻게 변경되는지 DOM 메소드를 직접 작성하는 대신, 무엇을 보여주고 싶은지를 정의한다면 더 좋습니다.

• 명령형 프로그래밍 - 어떻게
  셰프가 피자를 어떻게 만드는지에 대한 단계별 명령함
• 선언형 프로그래밍 - 무엇을
  피자를 만드는 단계는 고려하지 않고 원하는 피자를 주문

 

React: 선언형 UI 라이브러리 React: A declarative UI library

개발자가 React에게 UI에서 원하는 일을 얘기하면, React는 개발자를 대신하여 어떻게 DOM을 업데이트해야 하는지에 대한 방법을 알아낼 것입니다.

 

 

React Foundations: Updating UI with Javascript | Next.js