Component

🎈컴포넌트 초기 코드

MyComponent.js

import React, {Component} from 'react'
class MyComponent extends Component{
	render(){
    	return(
        <div>
        ~
	</div>
    )
  }
}

export default MyComponent  //모듈 내보내기 코드.(import의 반대)
      

App.js

import React, {Component} from 'react';
import MyComponent from './MyComponent'; // MyComponent 파일을 불러옴.

class App extends Component{
  render(){
    return(
      <MyComponent/>
      );
      }
}

export default App;

🎈props

props는 properties의 준표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(여기서는 App.js)에서만 설정이 가능함.

MyComponent.js

import React, {Component} from 'react'
class MyComponent extends Component{
	render(){
    	return(
        <div>
    	안녕하세요. 제 이름은 {this.props.name}입니다.    
	</div>
    )
  }
}

export default MyComponent  //모듈 내보내기 코드.(import의 반대)
      

this키워드를 사용하여 props에 접근.

App.js

import React, {Component} from 'react';
import MyComponent from './MyComponent'; // MyComponent 파일을 불러옴.

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

export default App;

🎁props의 기본 값 설정 : defaultProps

App.js에서 props에 대한 값을 주지 않았을 경우를 대비하여 기본 값을 설정해줍니다.

MyComponent.defaultProps={
  name:'기본이름'
}

🎁props 검증 : propTypes

컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때 사용합니다.

• 필수 props 지정 : isRequired
• props 의 타입 : string, number ....

#import PropTypes from 'prop-types';

MyComponent.propTypes={
  name:PropTypes.string.isRequired // name의 type을 string으로 하며 필수적인 요소로 간주한다.

🧨 propTypes, PropTypes 대소문자 구분에 있어서 주의해야함.

🎀더 많은 propTypes 종류

• array : 배열
• bool : 참, 거짓
• func : 함수
• number : 숫자
• object : 객체
• string : 문자열
• node : 렌더링할 수 있는 모든 것
• element : 리액트 요소

🎈state

위에서는 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용이 가능합니다.
컴포넌트 내부에서 읽고 또 업데이트할 수 있는 값을 사용하려면 state를 써야 합니다.
this.setState() 메소드를 사용하여 값을 업데이트 해야합니다.

🎁컴포넌트의 생성자 메서드 : constructor()

MyComponent.js 중 constructor 메서드

constructor(props){
  super(props);
  this.state ={
    number:0
  }
}

🎁state 값 업데이트 : setState()

버튼을 하나 렌더링하고 버튼을 누를 때마다 number값이 1씩 추가되도록 설정. MyComponent.js 중 render 메서드

render(){
        return(
            <div>
                <p>안녕하세요, 제 이름은 {this.props.name} 입니다.</p>
                <p>저의 나이는 {this.props.age}살입니다.</p>
                <p>숫자 : {this.state.number}</p>
                <button onClick={()=>{
                    this.setState({number:this.state.number+1})
                }}>Increment</button>
            </div>
        )
    }

🧨transform-class-properties문법으로 defaultProps, propTypes, state를 메서드 안에서가 아닌 밖에서 정의가 가능합니다.
🧨state 값을 업데이트 할 때는 언제나 .setState로만 업데이트 해야합니다. 다음은 잘못된 코드

this.state.number = this.state.number+1;
this.state.someArray.push(3);
this.state.someObject.value = 3;

참고 : <리액트를 다루는 기술>