[REACT] 컴포넌트(Components)와 Props

[REACT] 코드 살펴보기

---

Components ( 컴포넌트 )

위 사진은 리액트의 컴포넌트의 형태로, Tree 구조를 띄고있다.
컴포넌트는 함수형, 클래스형으로 총 2가지로 구성되어 있다.

함수형

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

클래스형

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

---

컴포넌트의 합성

• 모듈 내보내기 - 외부에서 사용할 모듈 이름 지정
  - export default 이름
• 모듈 불러오기 - 부모 컴포넌트에서 사용
  - import 이름 from 경로;

//상위
function App() {
  
return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

//하위
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

---

Props

• 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수이다.
• 하위 컴포넌트에서는 첫 번째 매개변수로 Props를 받을 수 있다.
• 하위 컴포넌트에서 사용할 때는 { }를 이용해서 값을 받을 수 있다.
• 상위 컴포넌트에서는 컴포넌트의 속성값을 동일이름으로 지정한다.

import { Fragment } from "react";
import MyComponent from "./component/MyComponent";

// 상위
function App() {
  return (
    <Fragment>
      <h3>나의 첫번째 컴포넌트</h3>

      <MyComponent name="홍길동" phone={"010-1234-1234"} age={1}/>
      <br/>
      <MyComponent name="이순신" phone={"010-5678-5678"} age={2}/>
      <br/>
      <MyComponent name="엄준식" age={30}/>
      <br/>

    </Fragment>
  );
}

export default App;

// 하위
import Proptypes from 'prop-types';

function MyComponent({name, phone, age}) {
  return (
    <div>
      자식 컴포넌트<br/>
      변수값: {name}<br/>
      변수값: {phone}<br/>
      변수값: {age}<br/>
    </div>

  )
}

export default MyComponent

---

props의 기본 값 설정하기 

※ 대소문자 정확하게 구분하기 때문에 주의해야 한다.

// 컴포넌트명.defaultProps = {}
MyComponent.defaultProps = {
  phone : "010-0000-0000",
  age: 0
}

---

Props의 타입 검증

// 컴포넌트명.proTypes = {}
MyComponent.propTypes = {
  name : Proptypes.string,
  age : Proptypes.number.isRequired, // 꼭 필수로 주세요
  phone : Proptypes.string
}

---

클래스형 컴포넌트

import { Fragment } from "react";
import MyComponent3 from "./component/Mycomponent3";

function App() {
  return (
    <Fragment>
      <MyComponent3 age={10}/>
    </Fragment>
  );
}
export default App;

// 하위
import React from "react";
// 클래스형 컴포넌트
class MyComponent3 extends React.Component {

  // 클래스형에서는 props를 사용하기 전에 생성자의 매개변수를 통해서 초기화해주는 작업
  constructor(props) {
    super(props); // 부모클래스와 연결
    this.props = props; // 나의 멤버변수에 props를 저장한다.
  }
  
  // 렌더 함수 오버라이드
  render() {
    let {age} = this.props;
    return (
      <div>
        이거슨 클래스형 컴포넌트 {age}
      </div>
    )
  }
}

export default MyComponent3