출처: https://www.codecademy.com

render() 함수

render()함수에는 return 문이 꼭 있어야 한다. 하지만 그게 다가 아니다.

render()함수에서 가능한 작업들을 살펴보자

연산

    class Random extends React.Component {
      render() {
        // First, some logic that must happen
        // before rendering:
        const n = Math.floor(Math.random() * 10 + 1);
        // Next, a return statement
        // using that logic:
        return <h1>The number is {n}!</h1>;
      }
    }

위 코드는 랜덤 숫자를 화면에 나타내지만, 아래 코드는 쉽게 실수할 수 있는 부분이니 확인하기 바란다.

    //오류코드 
    class Random extends React.Component {
      // This should be in the render function:
      const n = Math.floor(Math.random() * 10 + 1);
    
      render() {
        return <h1>The number is {n}!</h1>;
      }
    };



조건문

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const fiftyFifty = Math.random() < 0.5;
    
    // New component class starts here:
    class TonightsPlan extends React.Component {
      render() {
        let task;
        if (!fiftyFifty) {
          task = 'to bed'
        } else {
          task = 'out'
        }    
        return <h1>Tonight I'm going {task} WOOO</h1>;
      }
    }
    
    ReactDOM.render(
        <TonightsPlan />,
        document.getElementById('app')
    );

위 코드의 결과로는 Tonight I’m going (out/to bed) WOOO 가 화면에 랜덤하게 나타난다.


JSON 배열

    import React from 'react';
    import ReactDOM from 'react-dom';
      const friends = [
        {
          title: "Yummmmmmm",
          src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"
        },
        {
          title: "Hey Guys!  Wait Up!",
          src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"
        },
        {
          title: "Yikes",
          src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"
        }
      ];
    
    class Friend extends React.Component {
        render() {
        const friend = friends[2];
        
        return(
            <div>
                <h1>{friend.title}</h1>
                <img src={friend.src} />
            </div>
        );
     }
    }
    
    ReactDOM.render(<Friend />, document.getElementById('app'))