React 컴포넌트 & 프롭스 (Components & Props)

컴포넌트(Components)

화면의 부분부분을 재활용해서 사용하기 위해, 자식 요소로 만든다.
App에서 자식을 만들고, 그 자식에서 또다시 부분부분을 컴포넌트로.

 
->전체화면을 리렌더링하는걸 피하기 위해 변경하고 싶은 부분을 하나하나 자식컴포넌트로 만들고,
 그 부분에서 재활용할 부분을 자식요소로.
 
컴포넌트는 만들 때 앞글자를 대문자로 만드는 것이 규칙이다.

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

 

모듈불러오기 - 부모컴포넌트에서 사용한다.
import 이름 from 경로;

컴포넌트는 함수형, 클래스형 2가지이다.

함수형

const MyComponent2 = () => {
    return <div>함수형 컴포넌트</div>;
};

export default MyComponent2;

클래스형

import { Component } from "react";

class MyComponent3 extends Component {

    //클래스형 컴포넌트 render함수 안에서 return문을 작성
    render(){
        return(
            <div>나의 클래스형 컴포넌트</div>
        )
    }
}

export default MyComponent3;

---

Props

 

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

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

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

 

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

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

 

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

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

}