[React]컴포넌트와 Props

컴포넌트(component)란? 

* 재사용을 위한 특정 부분(기능)의 코드뭉치(모듈)의 단위

이미지와 같은 레이아웃을 생성할 때

일정관리(헤더) 컴포넌트, 

검색 컴포넌트,

일정역역 컴포넌트,

각 일정(input 라인) 컴포넌트

총 4개의 컴포넌트로 구성됨.

 

 

 

 

 

 

 

 

 

---

컴포넌트 선언방식

1. 함수형

1. 클래스형 컴포넌트보다 선언이 쉬움.

2. 클래스형 컴포넌트보다 메모리가 가벼움.

3. 빌드했을 때 배포 파일이 클래스형 컴포넌트보다 작음.

4. React Hooks가 도입되면서 함수형에서도 state와 라이프사이클 사용이 가능해짐. 

 

 

 

2. 클래스형

1. state기능 및 라이프사이클 기능을 사용할 수 있음.

2. 임의의 메서드를 정의할 수 있음.

3. render()함수가 꼭 있어야 하고, 그 안에서 JSX를 반환해야 함.

 

 

---

Props 사용하기

- 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용. 

- props로 전달된 데이터는 object타입. 

- 경우에 따라 컴포넌트 태그 내부 또는 태그 사이에 값을 너어 전달할 수 있음.

- 하위 컴포넌트 에서는 전달받는 데이터의 default값(defaultProps)이나 테이터 타입(proptypes), 필수 데이터(isRequire)를 지정할 수 있음.

- 컴포넌트의 형태(함수형, 클래스형)에 따라 props의 선언 방식이 조금씩 다름.

 

 

1. 함수형 컴포넌트

컴포넌트 파라미터로 상위 컴포넌트에서 전달한 props를 전달받아 사용.

컴포넌트 호출 시 태그 안에서 사용한 인자(name)는 props의 내부 변수로,

태그 사이에서 사용한 인자는 props.children으로 호출

import React from 'react';
import propTypes from 'prop-types';
 
const MyComponent = (props) => {
 
    //props 내부 함수(변수) 선언
    //컴포넌트 선언 시 const MyComponent = ({name, children})으로 사용한 것과 동일함.
    const {name, favoritNumber, children} = props;
 
    //props변수의 default값 지정
    MyComponent.defaultProps = {
        name : '기본 이름'      //props.name의 값이 없을 때 적용
    }
 
    //props변수의 데이터타입 지정
    MyComponent.propTypes = {
        //prop.name의 데이터타입은 string
        //데이터타입이 틀렸을 경우 console에 경고
        name : propTypes.string,
 
        //propTypes를 지정하지 않을 때 경고메세지
        //(App에서 favoriteNumber을 지정하지 않았을 때 경고)
        favoritNumber : propTypes.number.isRequired
    }
 
    return(
        <>
            <div>새 컴포넌트</div>
            <p>name : {props.name} = {name}</p>
            <p>props.children : {props.children} = {children}</p>
            <p>favoritNumber : {favoritNumber}</p>
            <br/>
            
        </>
    )
};
 
export default MyComponent;

2. 클래스형 컴포넌트

상위 컴포넌트에서 전달한 인자를 this.props로 전달받아 사용. 

경우에 따라 class 또는 render함수 내에서 선택적으로 propTypes 지정 가능

import React, { Component } from 'react';
import propTypes from 'prop-types';
 
export default class MyComponent extends Component{
     // class내부에서 proptypes 설정하는 방법
     static defaultProps = {
        name : '기본 이름'
    }
    static propTypes = {
        name : propTypes.string,
        favoriteNumber: propTypes.number.isRequired
    }
    render(){
        const {name, favoritNumber, children} = this.props;
 
        MyComponent.defaultProps = {
            name :'기본 이름'   //props에 값이 없을 때 지정하는 default 값
        }
 
        MyComponent.propTypes = {
            //name은 무조건 문자열 형태로 전달
            name : propTypes.string,     
 
            //propTypes를 지정하지 않을 때 경고메세지
            //(App에서 favoriteNumber을 지정하지 않았을 때 경고)
            favoriteNumber : propTypes.number.isRequired        
        }
        return(
            <>
                <div>새 컴포넌트</div>
                <p>name : {this.props.name} = {name}</p>
                <p>props.children : {this.props.children} = {children}</p>
                <p>favoritNumber : {favoritNumber}</p>
                <br/>
                
            </>
        )
        
    }
}
 

 

 

 

---

참조 : 리액트를 다루는 기술(김민준 / 길벗)