react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 props

properties의 줄임말

• 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
• props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

📙 JSX 내부에서 props 렌더링

• props 값은 컴포넌트의 파라미터로 받아와서 사용할 수 있다.
• props를 JSX 내부에서 렌더링할 때 {} 기호로 감싸 주면 된다.

const MyComponent = (props) => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>;
}
export default MyComponent;

import MyComponent from "./MyComponent";

// MyComponent의 부모 요소에서 props 값 설정
const App = () => {
    return <MyComponent name="React"/>;
}

export default App;

📙 defaultProps

• props의 기본값 설정할 때 사용

const MyComponent = (props) => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

📙 props.children

• 컴포넌트 태그 사이의 내용을 조회할 때 사용

const MyComponent = (props) => {
    return (
        <div>
            <p>안녕하세요. 제 이름은 {props.name}입니다.</p>
            <p>children 값은 {props.children>입나다.</p>
        </div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

import MyComponent from "./MyComponent";

// MyComponent의 부모 요소에서 props 값 설정
const App = () => {
    return <MyComponent>리액트</MyComponent>;
}

export default App;

📙 비구조화 할당 문법을 통해 props 내부 값 추출

destructuring assignment

const MyComponent = (props) => {
    // 비구조화 할당 문법을 이용하여 props 내부 값 추출
    const {name, children} = props;
    return (
        <div>
            <p>안녕하세요. 제 이름은 {name}입니다.</p>
            <p>children 값은 {children>입나다.</p>
        </div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

// 함수 파라미터가 객체일 때 비구조화 할당 문법 적용 가능
const MyComponent = ({name, children}) => {
    return (
        <div>
            <p>안녕하세요. 제 이름은 {name}입니다.</p>
            <p>children 값은 {children>입나다.</p>
        </div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

📙 propTypes를 통한 props 검증

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용

import PropTypes form "prop-types";

...

Food.propTypes = {
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
};

PropsTypes 종류

• array: 배열
• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열
  • arrayOf(PropType.number): 숫자로 이루어진 배열
• bool: true 혹은 false
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6 Symbol
• node: 렌더링할 수 있는 모든 것 (숫자, 문자열, 혹은 JSX 코드, children도 node Prototype이다.)
• instanceOf(class): 특정 클래스의 인스턴스
• oneOf([]): 주어진 배열 요소 값 중 하나
• oneOfType([]): 주어진 배열 안의 종류 중 하나
• objectOf();: 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류

📙 클래스형 컴포넌트에서 props 사용하기

• 클래스형 컴포넌트에서 props를 사용할 때 render 메서드에서 this.props를 조회하면 된다.
• 앞선 똑같은 방식으로 클래스 외부에서 defaultProps와 propTypes를 설정할 수 있다. (클래스 내부에서도 설정 가능)

static defalutProps = {
    name: "기본 이름"
};

static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
};