Use a Variable Attribute in a Component

Use a Variable Attribute in a Component

 

 

redPanda로 이름된 이 JS객체를 살펴보자. 

 

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

 

어떻게 리엑트 컴포넌트를 렌더하고, redPanda의 속성으로 사진이 보여지게 할 수 있을까?

 

RedPanda.js를 살펴보자. 

 

렌더 함수 내부에 있는 모든 {} JavaScript 주입을 주목해라!

라인 16, 17, 18은 모두 JS 주입을 사용한다. 

 

        <img 
          src={redPanda.src}
          alt={redPanda.alt}
          width={redPanda.width} />

 

당신은 렌더함수의 내부의 jsx에 JS를 주입할 수 있고 자주 그렇게 할 것이다. 

 

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')
);

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


const owl = {
  title: 'Excellent Owl',
  src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'
};

// Component class starts here:
class Owl extends React.Component{
  render(){
    return (
      <div> 
        <h1>{owl.title}</h1>
        <img 
         src = {owl.src}
         alt = {owl.title}
        />
      </div>
      )
  }
}

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

 

 

https://www.codecademy.com/courses/react-101/lessons/react-components-advanced-jsx/exercises/component-variable-attribute

| Codecademy

를 변역하였습니다.