2. 리액트의 Components와 props

1. 컴포넌트

 

리액트의 컴포넌트의 형태 (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 경로;

 

컴포넌트 합성

- 예를 들어 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 (중요)

상위 컴포넌트에서 하위컴포넌트로 전달하는 매개변수 입니다.

 

하위 컴포넌트에서 사용할 때는 {}를 이용해서 값을 받을 수 있습니다.

 

상위 컴포넌트에서는 컴포넌트의 속성값을 동일이름으로 지정합니다.

 

 

//상위
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    
}

---

 

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

컴포넌트명.propTypes = {}

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

}