[React] 컴포넌트

3.1 컴포넌트 생성

1. 파일 만들기 > 초기 코드 작성하기 > 모듈 내보내고 불러오기

src/MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component{
    render(){
        return(
            <div>
                my first componet
            </div>
        )
    }
}

export default MyComponent;
// 이 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정

이와 같이 작성된 파일을 다른 파일에서 사용할 수 있다. 다음과 같이

src/App.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

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

export default App;

3.2 props

1. props : properties
2. 순서 : props 렌더링 > props 값 설정 > props 기본 값 설정 > props 값 검증

src/MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component{
    render(){
        return(
            <div>
                hi my name is {this.props.name} 입니다.
                // props에 접근 시, this를 사용한다. 
                // 그리고 {}으로 감싸준다. 
            </div>
        )
    }
}

export default MyComponent;

src/App.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

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

export default App;

3. 기본값 설정하기, defaultProps

• MyComponet.defaultProps={name:'홍길동'}
• 또 다른 방법 : 클래스 내부에서 정의, but ES6 문법에서는 작동하지 않음

src/Mycomponet.js
import React, { Component } from 'react';

class MyComponent extends Component{
    static defaultProps ={
        name: 'man'
    }

    render(){
        return(
            <div>
                Hi my name is {this.props.name} 입니다.
            </div>
        )
    }
}
export default MyComponent;

4. props 검증 : propTypes

• props의 타입을 지정할 때, propTypes를 사용한다.
• 타입을 지정한다고 ?: string이냐, number냐 결정해주는 것 입니다.
• 지정된 타입 이외의 타입으로 값이 할당되면 오류메시지를 받을 수 있다.
  즉, 디버깅에 사용될 수 있다는 뜻이네?

5. propTypes 종류

• array, bool, func, number, object, string
• symbol : ES6 문법의 심벌 객체
• node : 렌더링할 수 있는 모든 것
• element : 리엑트 요소
• instanceof(CertainClass) : 특정 클래스의 인스턴스
  등등

6. defaultProps와 propTypes는 작성해주는 게 좋다. 협업 시 easy-to-know-what-it-is를 위해

3.3 state

1. props는 부모 컴포넌트가 설정한다. 컴포넌트 자신은 해당 props를 read-only로만 사용

• 어떤 느낌이냐면 자식 컴포넌트를 함수라고 생각하면, 부모 컴포넌트에서 그 함수의 전달인자를 결정하여 전달하는 느낌

2. 컴포넌트 내부에서 write-read 모두 하려면 state를 써야 한다.

• 그러기 위해서는 언제나 기본 값을 미리 설정해야 함!
• this.setState() 메서드로 업데이트 해야 한다.

3. state 초기값 설정 > state 렌더링 > state 업데이트 순서대로 알아봅시다.

4. state의 초기값은 생성자에서 설정한다. 생성자는 컴포넌트를 새로 만들 때 실행된다.

5. state 값을 업데이트하려면 setState() 메서드를 사용합니다.

src/Mycomponent.js
import React, { Component } from 'react';
import PropTypes from 'prop-types'

class MyComponent extends Component{
    static defaultProps ={
        name: 'man'
    }

    static propTypes ={
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    }

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

    render(){
        return(
            <div>
                <p>Hi my name is {this.props.name} </p>
                <p>And I am {this.props.age} years old</p>
                <p>my number : {this.state.number}</p>
                <button onClick={()=>{
                    this.setState({
                        number: this.state.number +1
                    })
                  }
                }>addition</button>
            </div>
        )
    }
}

export default MyComponent;

// onClick 부분 코드 잘 봅시다. ()=> 이런 문법의 의미 알아봅시다.
// ES6 문법인 화살표 함수 
// 이 문법은 주로 함수를 파라미터로 전달할 때 유용합니다. 

6. constructor에 state를 정의하는 방법 말고, constructor 밖에 정의하는 방법도 있다.

7. state 값을 업데이트할 때 주의 사항

• .setState() 메서드로 업데이트 합니다.
• setState의 역할은 파라미터로 받은 필드를 업데이트 후, 컴포넌트가 리렌더링!하도록 트리거!하는 것