React - 4. Component 와 props/state

 

 

 

 

 

개요.

1. 컴포넌트 종류 (클래스/함수)

2. 컴포넌트를 다루기 위한 props와 state

 

1. 클래스형 컴포넌트

import React, { Component } from 'react';

class myName extends Component {
	render(){
    	return {
        	<div>
            	My name is {this.props.name}.
            </div>
        }
    }
}

export default myName;

1.1 props

  - props 는 부모 컴포넌트가 자식(하위) 컴포넌트에게 넘겨주는 값

  - App.js 예)

import React, { Component }from 'react'
import myName from './myName';

class App extends Component{
	render(){
    	return(
        	<myName name="RoseM" />
        );
    }
}

export default App;

  - props 값은 this. 키워드로 호출 가능

 1.2 defaultProps

  - name 값 생략 후, 기본 값으로 호출하는 값

   - class 안에서 선언하거나 class 밖에서 선언 가능

//Class 안에서 선언하는 방법
...
class myName extends Component {
	static defaultProps = {
    	name : '기본'
    }
    render(){
    	return(
        	...
        );
    }
}
...

//Class 밖에서 선언하는 방법
...
class myName extends Component{
	render(){
    	return(
        ....
        )
    }
}

myName.defaultProps = {
	name : '기본'
};

...

 

1.2 state

 - State는 각 컴포넌트가 가지고 있는 개별적인 상태값 관리 (동적 데이터 관리)

import React, { Component } from 'react'

class Counter extends Component{
	Constructor(props){
      super(props);
      this.state = {
      	number : 0
      }
    }
    ...
}

  - 

 

1.3 setState

   - state 값을 수정하기 위한 방법

// 컴포넌트 내 메소드로 state 변경 방법

hIncrease(){
	this.setState({
    	number : this.stateNumber + 1
    }
}

 

constructor(props) {
	super(props);
    this.hIncrease = this.hIncrease.bind(this);
}

  - 이벤트(예, 버튼클릭)에 의한 this가 풀리는 것에 대해 방지로 constructor 내에 bind 처리

 

2. 함수형 컴포넌트

import React from 'react';

const Name = ({ name }) => {
	return (
    	<div>
        	My name is {name}.
        </div>
    )
}

 - 클래스 형 대신 단순 출력인 경우 함수형으로 간략화 가능