Passing a Variable to ReactDOM.render()

Passing a Variable to ReactDOM.render()

ReactDOM.render()‘s first argument should evaluate to a JSX expression, it doesn’t have to literally be a JSX expression.

The first argument could also be a variable, so long as that variable evaluates to a JSX expression.

In this example, we save a JSX expression as a variable named toDoList.

We then pass toDoList as the first argument to ReactDOM.render():

const toDoList = (
  <ol>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ol>
);

ReactDOM.render(
  toDoList, 
  document.getElementById('app')
);

 

---

ReactDOM.render()에 변수 전달하기

 

ReactDOM.render()의 첫번째 인자는 반드시 JSX식에 평가해야하며, 이것은 문자적으로 JSX식이어야만 할 필요는 없다.

첫번째 인자는 변수일 수 있다. 변수가 JSX식에 평가를 하는 한. 

 

이 예로, 우리는 JSX표현을 toDoList이름된 변수에 저장했다. 

우리는 그리고나서 toDoList를 ReactDOM.render()에 첫번째 인자로써 전달했다. 

 

 

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
const myList = (
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
)

ReactDOM.render(myList, document.getElementById('app'));

 

 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-intro/exercises/reactdom-render-variable

| Codecademy

 

을 번역하였습니다.