Class08(react 실습)

2022-07-29 2 분 소요

2022. 07. 28. 수업내용 정리

react 동작방식.. 실습..

Before
- 웹페이지가 만들어지는 과정
  1. HTML parser가 HTML을 바탕으로 DOM tree를 그립니다.
  2. CSS parser가 CSS를 바탕으로 CSSOM을 그립니다.
  3. DOM에 CSSOM을 적용하여 Render Tree를 그립니다.
  4. Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 합니다.
  5. HTML 코드를 읽어 내려가다가 태그를 만나면 파싱을 잠시 중단하고 js파일을 로드합니다.
  Render: 화면에 표시하는 것, Painting: 화면에 그리는 것
  - DOM, CSSOM
    
    DOM(Document Object Model)은 웹 브라우저와 javascript가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체입니다.
    
    CSSOM(Cascading Style Sheets Object Model)은 DOM에 CSS를 입힌 것입니다.(DOM에 CSS가 적용된 객체 모델)
    
    DOM을 제어하는 것은 곧 웹을 동적으로 제어하는 것이라고 이해할 수 있습니다. (요소의 추가, 수정, 삭제..)
react 동작방식
1. 웹 렌더링
  - 접근하고자 하는 웹의 IP주소에 접속
  - IP주소는 Domain 주소에 해당하므로 위의 DNS 서버로 가서 실제 주소에 요청을 보냅니다.
  - 서버가 클라이언트에 응답으로 index.html과 App.js를 보내게 됩니다. 이때, React는 SPA(Single Page Application) 이므로 index.html 파일은 단 하나만 존재합니다.
  - 서버로 부터 받아온 파일들로 Render Tree를 구헝하고, 이를 바탕으로 실제 화면에 렌더링 합니다.
2. react에서의 Virtual DOM
  - react에서는 state, props 라는 개념이 있는데, 화면에서 변화는 값을 의미합니다.
  React에서는 다음과 같은 경우 리렌더링이 일어납니다.
  1. Props가 변경되었을 때
  2. State가 변경되었을 때
  3. forceUpdate() 를 실행하였을 때
  4. 부모 컴포넌트가 렌더링되었을 때
  만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 됩니다.
  
  Virtual DOM과 Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제 돔에서 수정한 이후 새로운 화면을 렌더링 하게 되는 것입니다.
실습

App.js

App.css

먼저 import 부분부터 보면,

HTML에서 link나 script로 외부파일을 가져왔다면 react에서는 import를 이용해 필요한 것들을 호출할 수 있습니다.

line 1에서는 App.js가 렌더링할 JSX 구문에 적용될 CSS 파일을,

line 2에서는 컴포넌트를 사용하기 위한 선언을

line 3~5는 주소참조를 통해 이미지를 호출하고 있습니다.

line 6은 개별적으로 생성한 컴포넌트 호출하고 있습니다.

두 번째는 컴포넌트 부분으로

함수형, 클래스형이 있는데 본 예시에서는 클래스형을 기준으로 하겠습니다.

먼저 class키워드로 선언한 후 class명을 적고 component는 extends 라는 상속요소를 이용해 받아야 합니다.

component 생성시 state 값을 초기화하거나 메서드를 바인딩할 때 constructor를 사용합니다.

super(props)의 경우 this.props를 사용할 시 생성자 내에서 정의되지 않는 버그가 발생하는 것을 막기 위해 사용합니다.

세 번째는 render 부분입니다.

화면에 나타나는 부분으로 해석하면 되는데

return으로 반환한 JSX 요소를 화면에 내보내는 방식으로 이미지의 경우 Person 컴포넌트 내부에서 import를 통한 state를 활용한 방식 대신 public 폴더에 public_assets라는 폴더를 생성하고 그 안에 이미지를 넣으면 주소값만 참조하는 것으로도 이미지를 불러올 수 있습니다.

button 은 onclick 이벤트까지는 javascript와 동일하지만, App 내부에서 선언된 myFunc 함수를 불러오므로 앞에 this를 붙여줍니다.

Person 컴포넌트를 보기 전에 우선 아래의 코드를 확인하겠습니다.

Person.js

Person.css

Person 컴포넌트에 정한 마크업 형식대로 화면에 렌더링이 되고 props를 통해 state에서 정의한 요소들을 불러오는 방식입니다.

화면으로 나타나면 아래와 같습니다.

nodejs와의 연동을 위해서 잠시 배운터라 아직까지는 개념적으로 많이 부족한 부분이 많지만

본격적으로 react 수업에 돌입하게 되면 추가적으로 보충할 예정입니다.