[React] 컴포넌트, props

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React

 

 

1. 컴포넌트

😺 리액트 컴포넌트에 대해 알아보자 :) 

 

😺 리액트의 컴포넌트는 Tree 구조로

1. 함수형

2. 클래스형

2가지를 가진다.

 

 

📍 함수형

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

 

📍  클래스형

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

 

 

📍 함수형 컴포넌트 사용 방법 

모듈내보내기 - 외부에서 사용할 모듈 이름을 지정합니다.

모듈불러오기 - 부모컴포넌트에서 사용

 

 

 

 

😺 컴포넌트 합성

• 예를 들어 Welcome을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있습니다.

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

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

 

 

 

2. props (중요)

 

😺 props 개념 

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

//상위
const App = () => {
    return (
    	<Fragment>
        	<MyComponent name={"홍길동"} age={2} email={"aa@naver.com"}/>
    	</Fragment>
    )
}

//하위
const MyComponent = ( {name, age, addr, email} ) => {
   return (
        <div>
            나의 첫번째 컴포넌트<br/>
            프로퍼티1:{name}<br/>
            프로퍼티2:{age}<br/>
            기본값 프로퍼티3:{addr}<br/>
        </div>
   )

 

 

📍   props의 기본값 설정하기 (주의 - 대소문자 정확하게 구분함  )

컴포넌트명.defaultProps = {}

//MyComponent.defaultProps = {
//    addr: '서울시',
//    age: 0
//}

function MyComponent( {name = "이름없음" , age = 0, addr = "경기도" }  /* props */  ) { //props값을 받음

}

 

 

 

📍   props의 타입검증 (주의 - 대소문자 정확하게 구분함  )

컴포넌트명.propTypes = {}

import PropTypes from 'prop-types'; //프롭스 타입검사
//....

MyComponent.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    email: PropTypes.string.isRequired//필수값(상위컴포넌트에서 반드시 전달)
}

 

 

 

---

 

 

[ App02.js ]

//예제 app
import MyComponent from "./component/Mycomponent";

function App(){
  return(
    <div>
      <MyComponent name={"홍길동"} age={20} addr={"서울시"}/>
      <MyComponent/>
    </div>
  )
}


export default App;

• Props : 상위 컴포넌트에서 하위컴포넌트로 전달하는 매개변수 

 

 

 

[ MyComponent.js ]

 

import Proptypes from 'prop-types';

function MyComponent( {name, age, addr} /* props */ ){
  /* function MyComponent( {name="이름없음", age = 0, addr = "경기도"}  */
  //console.log(props);

  /* name = "이순신"; 옳지 않은 방법 */

  return (
    <div>
      3 : {name} {/* props.name */}
      1 : {age}
      2 : {addr}
    </div>
  )
}


MyComponent.defaultProps = {
  name : "이름 없음",
  age : "0",
  addr : "주소 없음",
}


MyComponent.prototype = {
  name : Proptypes.string,
  age : Proptypes.number,
  addr : Proptypes.string
}

export default MyComponent;

 

 

---

 

 

• props 값 받아오기

  return (
    <div>
      3 : {name} {/* props.name */}
      1 : {age}
      2 : {addr}
    </div>
  )

 

 

• props 기본 값 설정하기

MyComponent.defaultProps = {
  name : "이름 없음",
  age : "0",
  addr : "주소 없음",
}

 

 

• props 타입 검증

MyComponent.prototype = {
  name : Proptypes.string,
  age : Proptypes.number,
  addr : Proptypes.string
}