TIL(2020.12.11)

1. Props(with 클래스형 component)

• Properties의 준말
• 어떤 값을 콤포넌트에게 전달할 때 사용
• 즉 콤포넌트끼리 값을 주고받을때 사용하는 수단이라고 할 수 있음.
• 리액트에서 부모 Component가 자식 Component한테 값을 전달할 때 사용
• 예를 들어 App.js에서 MyName.js 콤포넌트를 사용할 경우

MyName.js

Import React, { Component } from 'react';

class MyName extends Component {
  render () { // 모든 콤포넌트는 render 함수가 있어야함.
    return(
      <div>
        Hello! My Name is <b>{this.props.name}</b>
      </div>
    )
  }
}

export default MyName;

App.js

import React, { Component } from 'react';
import MyName from './MyName'; // MyName 콤포넌트 불러오기

class App extends Component {
  render() {
    return (
      <MyName name='리액트'/>; //실행결과 'Hello! My Name is 리액트'
      );
    }
  }
export default App;

해석

• App.js에서 MyName.js 콤포넌트를 불러와서 사용했음.
• MyName.js에서 this.props.value 를 통해 값을 받을 준비를 하고, App.js에서 name값을 받아 MyName에 전달한 뒤 완성된 MyName 콤포넌트를 App.js에서 재사용함.

1-1. Props 콤포넌트의 기본값 설정해주기

-만약 위의 예시처럼 props로 전해줄 값이 정해지지 않거나 제대로 전달되지 않을 경우 렌더링할 기본 값을 설정해주어야 하는데 방법은
1) MyName 클래스 내부 Props 콤포넌트에 static값을 추가하는 방법
2) MyName.js 콤포넌트(클래스 하단)에 default값을 추가하는 방법
두 가지가 있다.

1) MyName 클래스 내부에 static값 지정하기

class MyName extends Component {
  static defaultProps {
    name: '기본이름'
  };
//출력결과 Hello! My name is 기본이름

2) MyName.js 콤포넌트 하단에 default값을 추가하기

}//class MyName extends Component {가 닫히는 괄호
  MyName.defaultProps {
    name: '기본이름'
   }
   //출력값 1)과 동일

1)과 2)는 둘다 결과값이 동일하나 1)이 최신이다. 다만 어차피 1)로 해놓으면 Babel이 알아서 2)처럼 아래로 내려줌. 결과적으로 동일함.

2. 함수형 Component

• 함수형 component는 단순히 Props만 받아와서 보여주는 경우에 주로 사용.

  import React, from 'react';//{Component}호출 불필요.
  const MyName = ({name}) => {
    return (
      <div>
        Hello! My name is {name}
      </div>
    )
   }
  MyName.defaultProps = {
    name : '기본이름'
   }
  export default MyName;

- 함수형 Component 사용시에는 Component를 불러올 필요가 없다.
- 하지만 react는 불러와야함. JSX문법을 사용하려면 내부적으로 리액트를 사용하기 때문.
- 함수형 콤포넌트 사용시 ({name}) 이 부분을 **비구조화 할당** 이라고 함.
- 객체 내부의 name 값을 props로 받아와서 사용하는 방법인데, 추가 TIL작성 예정.

## 3. 클래스형 component와 함수형 component의 차이