[React] React 에서 값 넘기기

| src 밑에 MyName.js 파일을 하나 만들어준다.

 

| 함수를 작성하고 MyName 이라는 이름으로 이 문서를 사용할 수 있도록 맨 밑에 export default MyName; 로 적어준다.

function MyName(){
    return(
        <span>
            
        </span>
    )
}
export default MyName;

 

| App.js 문서에서 데이터를 전송하도록 한다.

import React from 'react'
import logo from './logo.svg';
import './App.css';
import './css/mystyle.css'
import my from './images/torikelly.png'
import MyName from './MyName';

export default class App extends React.Component{
  render(){
    //javascript 기술하는 영역
    //상수,함수,전역변수
    
    return(
      <div>
        <img src={my} alt='토리켈리' width='200'/><br></br>
        <MyName first='tori' last='kelly'></MyName>
      </div>
    )//return end
  }//render end
}//class end

 

| MyName.js 문서에서 App.js 문서에서 입력된 데이터를 받는다. 매개인자에 꼭 first, last 을 받아야한다.

function MyName({first,last}){
    return(
        <span>
            이름: {first} {last}
        </span>
    )
}
export default MyName;

 

 

| 호출

MyName.js를 호출하면 사진 밑에 이름이 나타난다.

 

| function 대신 const 사용하기

const MyName = ({first,last}) => {
    return(
        <span>
            닉네임: {first} {last}
        </span>
    )
}
export default MyName;

 

| class 사용하기

MyName.js

import React, {Component} from "react";

class MyName extends Component {
    render(){
        const {first,last} = this.props;
        return(
            <span>
                이름 : {first} {last} <br></br>
                닉네임 : {this.props.first} {this.props.last}
            </span>
        )
    }
}
export default MyName;

| 출력결과