빙액트 (1)

우리 빙먹 프로젝트에 사용할 리액트의 이름은 빙액트다.

빙액트를 구현하는 과정이 쉽지만은 않을 것이다. 하지만 쫄지말자. 쉽지않다는 것은 얻어 갈 것도 많다는 것!!! 아 설레네~~

 

 

먼저 리액트를 구현하기 전에 기본 개념을 알아야 한다. 먼저 JSX로 정의된 엘리먼트가 어떻게 JS로 변환되는지,이를 어떻게 React는 createElement 하는지에 대해 알아야 한다.

기본 개념

const element = <h1 title="foo">Hello</h1>

// JSX -> JS
const element = React.createElement(
  "h1",
  { title: "foo" },
  "Hello"
)
​

JSX는 바벨과 같은 빌드 툴에 의해 JS 코드로 변한해준다. 변환받은 JS 코드에서 React.createElement는 인자 값들로 객체를 생성하고 유효성 검사를 한다.

 

React.createElement 로 생성된 객체는 아래와 같다.

const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "Hello",
  },
}

보면 알겠지만 type은 DOM 노드의 타입을 지정하는 문자열, tagName이다. 또 props에 여러 속성들을 객체형태로 가지고  이 중 children은 자식 노드들을 저장할 객체라고 보면 된다. 지금은 문자열이지만 일반적으론 배열의 형태이다.

 

const container = document.getElementById("root")
ReactDOM.render(element, container)

이제 render를 구체해보자

const node = document.createElement(element.type)
node["title"] = element.props.title

const text = document.createTextNode("")
text["nodeValue"] = element.props.children

node.appendChild(text)
container.appendChild(node)

1. DOM 노드이 타입에 맞게 노드 생성

2. props를 해당 노드에 설정해준다. 

3. children의 값인 Hello의 문자열을 넣어주기 위해 TextNode생성

4. 이 텍스트 노드에 nodeValue 속성에 해당 문자열 "Hello"를 설정해준다. 

5. 노드에 자식요소에 넣고 이를 컨테이너에 넣는다.

 

이렇게 리액트가 구현되는 간단한 로직이다.