React Elements

c 또는 d 디렉토리에 자기 이름의 폴더를 생성후 그 아래 score 폴더를 생성한다. (예: c:\ldk\score) 그리고, webstorm에서 해당 폴더를 연다 File > open 후 해당 폴더 선택. 해당 폴더를 우클릭후에 New > html 파일 선택하고 index.html, New > StyleSheet 선택후 app.css, New > Javascript 선택후 app.js를 다음과 같이 생성한다.

crossorigin 이 발생할수 있으므로 삽입했다. react 스크립트는 core 부분에 해당하고 react-dom은 웹을 개발할때 필요한 요소이다. 만일 react native로 개발한다면 이 부분은 react-native가 될 것이다.

app.js에 ReactElement를 생성하고 화면에 표시해보자. createElement는 3가지 파라메터를 가진다. 타입스크립트로 된 프로토타입을 살펴보면 다음과 같다.

타입스크립트는 변수명: 타입명 으로 변수명이 앞에 나오고 콜론 다음에 변수명이 나온다.

  • 입력 파라메터

첫번째 type은 변수명이고 가능한 타입은 컴포넌트 클래스 혹은 스트링 타입이 올수 있다. 스트링 타입은 ‘h1’ 같이 html 엘리먼트가 올 수 있고 컴포넌트는 리액트 펑션 컴포넌트 혹은 클래스 컴포넌트가 올수 있다.

두번째 변수명은 props 이고 ? 가 의미하는것은 타입스크립트의 옵셔널 연산자로서 올수도 있고 안올수도 있다는 의미이다. 타입은 json 객체 혹은 null 이 올수 있다. 예를 들어 id 속성이 main을 가진다면 { id: ‘main} 이렇게 올 수 있다는 의미이다.

세번째 변수명은 children이다. 그런데 앞에 … 이 붙어있는데 이 연산자는 나머지 연산자라는 의미이다. 즉, 3번째 이후의 모든 파라메터는 childred 으로 매핑된다. 세번째 이후에 오는 파라메터는 ReactNode 타입이고 뒷부분에 [] 이 붙어 있으므로 예를 들어 세번째에 Node1 네번째 Node2가 온다면 children = [Node1, Node2] 이렇게 올 수 있다는 의미이다.

  • 리턴 타입

리턴타입은 React Element 로써 자바스크립트 객체이다. 리액트에서는 DOM을 직접 다루는게 아니라 DOM과 매핑된 자바스크립트 객체인 VirtualDom을 다룬다.

Q: 다음중 가능하지 않는 것은?

  1. React.createElement(‘p’)
  2. React.createElement(‘p’, null)
  3. React.createElement(‘p’, {id: ‘main})
  4. React.createElement(‘p’, null, ‘hi’)
  5. React.createElement(‘p’, null, ‘hi’, React.createElement(‘strong’) )

위에 다섯가지 모두 가능하다. 1번은 세번째 파라메터가 나머지 연산자이므로 0개 이상 올수 있으므로 하나도 안 올수 있고 두번째 파라메터는 옵셔널 연산자이므로 안올수 있다. 그러므로 첫번째 파라메터 한개만 존재할 수 있다. 4번은 세번째 파라메터 4번째 파라메터 모두 children이 받을 수 있고 children = [‘hi’,
React.createElement(‘strong’) ] 이렇게 받게 된다.

만일 React. 을 타이핑했을때 createElement가 나타나지 않으면 앞부분 webstorm 설정 javascript 설정 부분을 보고 추가해야 한다.

실행하기

index.html을 우클릭해서 Run을 하면 webstorm에서 웹서버를 구동하고 실행해준다. 좀 더 일반적인 방법으로 실행하는 방법은 http-server 라는 모듈을 이용하는 방법이다.

webstorm 하단 terminal 창을 열고 http-server . 을 실행 해보자. 현재 디렉토리를 루트로 해서 로컬 웹서버를 실행하라는 의미이다.

화면에 제대로 나타나는지 확인고 콘솔창에 찍히는것을 확인해보자. createElement가 생성한 것은 DOM이 아니라 React Element라는 자바스크립트 객체라는것을 기억하자. 콘솔에 찍히는것을 확인해보자. 그리고 두번째 세번째 파라메터로 전달한것이 모두 props로 저장되었다는것을 개발자 콘솔에서 확인해보자.

만일 소스를 수정후 F5 로 웹페이지가 업데이트가 안되면 control-shift-r 을 눌러서 캐쉬를 지우고 업데이트를 해보자.

React Element

이번에는 header 엘리먼트를 만들고 header 엘리먼트의 자식으로 title 과 desc 엘리먼트를 포함하도록 한다. createElement의 세번째 이후의 파라메터는 모두 자식 노드이다.

F12를 눌러서 개발자모드에서 확인해보면 다음과 같다.

react 렌더링

react는 실제 DOM 노드 즉, h1, div, span 같은 태그를 만들지 않는다. 대신에 DOM 노드를 서술하는 자바스크립트 객체를 만든다. createElement()를 사용하여 만든 자바스크립트 객체가 실제 DOM 노드로 렌더링 되는것일까? 그것은 render() 메서드가 하는 역할로서, createElement()로 만든 자바스크립트 객체를 실제 DOM으로 만들고 업데이트해주는 역할을 해준다.

react 는 실제 DOM을 다루는게 아니라 DOM에 매핑 되는 자바스크립트 객체를 다룬다는것이 Virtual DOM의 핵심이다. 만일 특정한 속성을 수정하게 되면 자바스크립트 객체에서 바뀐 부분을 찾는다. DOM에서 찾는게 아니라 메모리에 올라간 자바스크립트 객체에서 바뀐 비교 검색하기 때문에 실제 DOM을 다루는것보다 훨씬 빠르게 업데이트가 가능해준다.

처음에 한번 전체 DOM을 렌더링 한 이후에는 필요한 부분만 업데이트를 하게 된다. 메모리에 올라간 자바스크립트 객체에서 변경된 부분을 찾은 후 매핑되는 DOM 만 업데이트하는 식이다.

– note

+ todo quiz

아래와 같이 p태그안에 strong 태그를 감싸도록 createElement를 사용해서 작성하자. 우측 상단 코드펜 태그를 눌러서 작성하면 된다.

See the Pen react -react element by LeeDongKee (@eastflag) on CodePen.0

+ 정답 설명

+ 퀴즈