2. 리액트의 Components와 props

1. 컴포넌트

리액트의 컴포넌트의 형태 (Tree구조)

* APP.JS 가 화면을 구현하는 최상위 객체가됨.

* APP JS 아래에 컴포넌트들을 자식 객체로 넣는다.

* APP만 있으면 화면 전체가 계속 리렌더링 됨. 

 따라서 APP 하위 객체로 컴포넌트들을 세분화 시켜서 
 한 화면에 세분화된 컴포넌트들을 리렌더링 시키는 것.

 

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

*클래스형이 기본적이지만 사용하기 어려워서 리액트 측에서 함수형 컴포넌트를 제공.

-리액트를 다루는 기술 책의 87p 참고.

 

*함수형 

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

 

 

*클래스

import { Component } from "react";

class MyComponent3 extends Component{

    //클래스형 컴포넌트가 제공해주는 render함수 안에서 return문을 작성
    render(){
        return (
            <div>나의 클래스형 컴포넌트</div>
        )
    }
}
export default MyComponent3;

- 위에처럼 Component 를 상속하는 클래스(위에서는 MyComponent3)를 지정한다.

 

 

*모듈 내보내고 불러오는 법.

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

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

 

*컴포넌트 합성

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

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


const App = () => {
    
    return (
        <Fragment>
            <h3>나의 App.JS</h3>
            {/* props */}
            <MyComponent name={"홍길동"} age={20}/>
            <MyComponent2/>
            <MyComponent2/>
            <MyComponent3/>
        </Fragment>
    )

}

export default App; //내보내기

 

 

------------------------- 01-14 여기까지 봤음---------------

 

 

2. props (중요) ★★★★★

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

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

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

 

 

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

컴포넌트명.defaultProps = {}

 

/* props의 기본값 지정하기 컴포넌트명.defaultProps = {} */
MyComponent.defaultProps = {
    name : "이름없음",
    age : 0,
    // email : "지정안됨",
    addr : "서울시" //addr은 전달되지 않지만 기본값
}

 

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

컴포넌트명.propTypes = {}

/* props의 타입검증 컴포넌트명.propTypes={} */
MyComponent.propTypes = {
    name : PropTypes.string,
    age : PropTypes.number,
    email : PropTypes.string.isRequired //문자열 타입, 반드시 전달
}

 

 

<기억하기>

*component 파일은 맨 앞글자를 대문자로 쓰는것이 규칙. 

*import 할 때는 ctrl + space bar 눌러서 자동완성 기능의 힘을 쓰자.

* 주석 alt + shift + a 

*리액트 docs 싸이트 :

https://ko.reactjs.org/docs/typechecking-with-proptypes.html