React 컴포넌트의 종류, 합성하기, Props, Props의 children

함수형 컴포넌트

const welcome = (props) =>{
  return (
    <h1>Hello! {props.name}</h1>
    );
}

const welcone = ({name}) =>{
  return (
    <h1>Hello! {name}</h1>
    );
}

함수형 컴포넌트의 인자로 props가 오게 되는데, props를 비구조화 할당하여 props.name이 아닌 name으로 props 값을 사용할 수 있게 됨

클래스형 컴포넌트

render 함수에서 React.element를 리턴

class Welcome extends React.Component{
  render(){
    return <h1>Hello! {this.props.name}</h1>;
  }
}

Welcome component는 React component를 상속받아 render함수를 오버라이드 하고 있음

오버라이드 : 덮어씌우는 것, 상속관계인 부모클래스와 자식클래스 사이에서 부모클래스의 메소드를 똑같이 가져와 사용하는 것. this.props를 사용

컴포넌트 합성하기

컴포넌트는 다른 컴포넌트와 합성하여 새로운 컴포넌트를 생성할 수 있다. 컴포넌트는 하위 컴포넌트를 가질 수 있다.

Props

함수형 컴포넌트에서 props 사용하기
{props.number}
클래스형 컴포넌트에서 props 사용하기
자바스크립트의 클래스에서 클래스 안의 메서드 사용 → this
props 또한 this 메서드를 통해 사용해야 함
{this.props.number}

모든 컴포넌트의 props는 수정할 수 없다.

Props의 children

컴포넌트의 child(문자열,객체,배열,undefined)를 얻기 위해 사용하는 메서드는 props.children

return <h3>{JSON.stringify(props.children)}</h3>;

props의 기본값 설정 → defaultProps 사용

ClasName.defaultProps = {propsName:value}
class UserInfo extends React.Component{
  render(){
    return(
      <div>
      <h1>{this.props.name}</h1>
      <h1>{this.props.job}</h1>
      </div>
      );
  }
}
UserInfo.defaultProps={
  job: 'programmer'
}