Multiline JSX in Componenet

여러줄의 JSX 문법을 컴포넌트 안에서 쓸 경우 () 사이에 넣는다

class QuoteMaker extends React.Component {
  render() {
    return (
      <blockquote>
        <p>
          The world is full of objects, more or less interesting; I do not wish to add any more.
        </p>
        <cite>
          <a target="_blank"
            href="https://en.wikipedia.org/wiki/Douglas_Huebler">
            Douglas Huebler
          </a>
        </cite>
      </blockquote>
    );
  }
};

return 뒤에 () 사이에 긴 JSX코드를 넣음!

변수에 저장된 값을 attribute 값으로 넣기

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

const redPanda = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
  alt: 'Red Panda',
  width:  '200px'
};

class RedPanda extends React.Component {
  render() {
    return (
      <div>
        <h1>Cute Red Panda</h1>
        <img 
          src={redPanda.src}
          alt={redPanda.alt}
          width={redPanda.width} />
      </div>
    );
  }
}

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

• 클래스 컴포넌트 밖에서 선언된 redPanda라는 객체에 여러가지 값들이 저장되어있다.
• 이 값을 RedPanda라는 클래스 컴포넌트의 렌더 리턴값의 <img /> 태그의 속성들에 넣고싶다.
• 그럴 경우 {}를 사용하여 JSX안에서 자바스크립트 문법을 사용한다 (javascript injection)

Render()에 로직 작성하기

클래스 컴포넌트의 render() 함수는 return 값을 항상 가져야하지만, 그 외에도 포함될 수 있는 것들이 있음

class Random extends React.Component {
  render () {
    const n = Math.floor(Math.random() * 10 + 1);
    
    return <h1>The number is {n}!</h1>;
  }
}

랜덤한 숫자를 출력하는 <h1></h1> 요소를 렌더하는 함수 안에 n이라는 변수를 둘 수 있음.

⛔️ 주의 : 이 변수가 render() 메소드 밖에 나와있으면 안됨. 어떤 변수든지 어떤 메소드 안에 들어가 있어야함. 클래스 선언의 한 부분이 되면 에러.

class Random extends React.Component {
  // class component 안에 변수 선언 불가능!!!
  const n = Math.floor(Math.random() * 10 + 1);
  render () {    
    return <h1>The number is {n}!</h1>;
  }
}

🔥 class component 밖의 변수에도 접근할 수 있음!

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

const friends = [
  {
    title: "Yummmmmmm",
    src: "https://content.codecademy.com/courses/React/react_photo-monkeyweirdo.jpg"
  },
  {
    title: "Hey Guys!  Wait Up!",
    src: "https://content.codecademy.com/courses/React/react_photo-earnestfrog.jpg"
  },
  {
    title: "Yikes",
    src: "https://content.codecademy.com/courses/React/react_photo-alpaca.jpg"
  }
];

class Friend extends React.Component {
  render () {
    const friend = friends[0];

    return (
      <div>
        <h1>{friend.title}</h1>
        <img src={friend.src} />
      </div>
    )
  }
}

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

Render()에 조건문 작성하기

const fiftyFifty = Math.random() < 0.5;

class TonightsPlan extends React.Component {
  render() {
    let plan;

    if (fiftyFifty) {
      plan = "out";
    } else {
      plan = "to bed";
    }

    return <h1>Tonight I'm going {plan} WOOO</h1>
  }
}

render() 내부에 return 전에 조건문을 넣음

컴포넌트에서 this 사용

class IceCreamGuy extends React.Component {
  get food() {
    return 'ice cream';
  }
 
  render() {
    return <h1>I like {this.food}.</h1>;
  }
}

this 는 속해있는 블록요소 (이 경우 render(){}) 가 속해있는 객체(=IceCreamGuy)를 지칭함

💡 this.food 뒤에 ()가 없는 이유는 get 메소드이기 때문

this 관련 추가 자료

컴포넌트에서 Event Listener 사용

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }
 
  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}

onHover = 이벤트 리스너
리액트에서는 인라인 스타일로 이벤트 리스너를 JSX 요소에 붙임

{myFunc} = 이벤트 핸들러
리액트에서는 컴포넌트 클래스 안에 메소드의 형식으로 이벤트 핸들러를 정의함