[React] React 에서 class 사용하기

| this.props 란?

한국어로 말하면 "이 속성"이다.

클래스 내에서 기술했으니 클래스 안에서 정의되어 있는 first 와 last를 의미한다.

*함수나 const로 되어있는곳에서는 this.props 가 적용되지 않는다.

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;

 

| jsp 와 React의 출력 방식의 차이

jsp 문서에서 표현식 출력 <%=변수%> jsp 문서에서 EL 출력 ${변수}

React 에서 출력 return( <div>{변수} <div> ) React 에서 출력 return( <div> {this.props.first} <div> )

 

| this.props 에 first 와 last 값 집어넣기

const {first,last} = this.props;

 

| src 폴더에 Counter.js 문서를 하나 만들어준다.

 

| Counter.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'

class Counter extends React.Component{
    handleIncrease = () => {

    }//end

    handleDecrease = () => {

    }//end

    render(){
        return(
            <div>
                <h2>Counter.js</h2>
            </div>
        );
    }
}

export default Counter;

| MyName.js

만약 App.js 에서 값을 안준다면, defaultProps가 값으로 들어간다.

React 에서는 문장끝에 세미콜론이 아닌 , 콤마를 찍는다.

import React from "react"

class MyName extends React.Component {
    static defaultProps = {
        first:'one',
        last:'LA',
    }//end

    render(){
        return(
            <span>
                닉네임 : {this.props.first} {this.props.last}
            </span>
        );
    }
}

export default MyName;

 

 

| this.props 를 사용한 값 출력

import React from 'react'
import './App.css'
import './css/mystyle.css'
import my from './images/torikelly.png'

export default class App extends React.Component{
  static defaultProps = {
    sabun: 1123,
    name: 'apple'
  }
  
  state = {
    idx: 7789,
    writer: 'koline'
  }

  render(){
    const { sabun, name} = this.props;
    const { idx, writer} = this.state;
    return(
      <div>
          사번 : {this.props.sabun}<br></br>
          이름 : {this.props.name}<br></br>
          <hr></hr>
          사번 : {sabun}<br></br>
          이름 : {name}<br></br>
          <hr></hr>
          색인 : {this.state.idx}<br></br>
          저자 : {this.state.writer}<br></br>
          <hr></hr>
          색인 : {idx}<br></br>
          저자 : {writer}<br></br>
      </div>
    )//return end
  }//render end
}//class end

 

| 출력결과