Put Logic in a Render Function

Put Logic in a Render Function

렌더함수에 로직 놓기.

 

render()함수는 만드시 return문을 가져야한다. 

하지만, 그것이 가질 수 있는 전부는 아니다.

 

render함수는 또한 컴포넌트가 렌더하기 바로 직전에 일어나야하는 간단한 계산식을 놓기에 좋은 자리가 될 수 있다. 

여기 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>;
  }
};

위 에시에서, const n 선언 줄은 문법 에러를 발생시킬것이다. 

render()같은 method에서 이루어져야하지,  class 선언을 스스로 할 수 없다. 

 

---

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"
  }
];

// New component class starts here:
class Friend extends React.Component{
  render(){
    let friend = friends[0];   // 요기가 뽀인트!
    return(
      <div>
        <h1>{friend.title}</h1>
        <img 
          src={friend.src}
        />
      </div>
    )
  }
}

ReactDOM.render(<Friend />, document.getElementById('app'));

 

https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/render-function-calculations

| Codecademy