반응 기초

PropTypes: Props는 구성 요소에 정보를 전달하는 데 사용됩니다. 속성 유형은 구성 요소에 전달된 속성의 의도된 유형을 문서화하는 데 사용됩니다. React는 해당 정의에 대해 구성 요소에 전달된 props를 확인하고 일치하지 않으면 개발 단계에서 경고합니다. PropTypes 유틸리티는 유형 정의를 구성하기 위한 광범위한 유효성 검사기를 내보냅니다.
다음은 기본 데이터 유형에 대한 유효성 검사기입니다.
PropTypes.any: prop은 모든 데이터 유형이 될 수 있습니다.
PropTypes.bool: 소품은 부울이어야 합니다.
PropTypes.number: 소품은 숫자여야 합니다.
PropTypes.string: 소품은 문자열이어야 합니다.
PropTypes.func: 소품은 함수여야 합니다.
PropTypes.array: 소품은 배열이어야 합니다.
PropTypes.object: 소품은 개체여야 합니다.
PropTypes.symbol: 소품은 기호여야 합니다.

const isEmail = function (propValue, key, componentName, location, propFullName) {
    const regex = /^((([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;

    if (!regex.test(propValue[key])) {
        return new Error(`Invalid prop `${ propFullName }` passed to `${ componentName }`. Expected a valid email address.`);
    }
}

Component.propTypes = {
    emails: PropTypes.arrayOf(isEmail)
}

State-props: props와 state는 모두 일반 JavaScript 객체입니다. 상태는 함수 내에서 선언된 변수와 같이 구성 요소 내에서 관리됩니다. 상태를 사용하면 구성 요소가 자체 데이터를 만들고 관리할 수 있습니다. 상태 구성 요소를 사용하면 데이터를 전달할 수 없지만 내부적으로 생성하고 관리할 수 있습니다.

import React, { useState } from 'react';
const AddPlants = () => {
    const [name, setName] = useState('');
    return (
        <div>
            <TextField
                sx={{ width: { xs: '100%', md: '50%' }, mb: 2 }}
                id="standard-basic1"
                label="Plant Name"
                name="name"
                onBlur={(e) => setName(e.target.value)}
                variant="standard"
            />
            <ul>
                <li>{name}</li>
            </ul>
        </div>
    )
}

Props는 모든 구성 요소에 정보를 전달하는 데 사용됩니다. 구성 요소 간의 React의 데이터 흐름은 단방향입니다. 즉, 부모에서 자식으로만 데이터를 전달합니다. props의 데이터는 읽기 전용입니다.

import React, { useState } from 'react';
const AddPlants = (props) => {
    const {name, id, price} = props.plants;
    return (
        <div>
            <ul>
                <li>{name}</li>
                <li>{id}</li>
                <li>{price}</li>
            </ul>
        </div>
    )
}

JSX: JSX 전체 형식은 JavaScript XML입니다. JSX를 사용하여 React에서 HTML을 작성할 수 있습니다. JSX를 사용하면 React에서 HTML을 쉽게 작성하고 추가할 수 있습니다. HTML 태그를 반응 요소로 변환합니다.

const myelement = <h1>React is times better with JSX</h1>;

구성 요소 수명 주기: 각 구성 요소에는 프로세스의 특정 시간에 코드를 실행하도록 재정의할 수 있는 여러 "수명 주기 메서드"가 있습니다. React Component는 다음과 같이 수명의 4단계를 거칠 수 있습니다.
마운팅: 마운팅은 render 메소드 자체에서 반환된 JSX를 렌더링하는 단계입니다. 이 메서드는 구성 요소의 인스턴스를 만들고 DOM에 삽입합니다.
업데이트 중: 업데이트는 구성 요소의 상태가 업데이트되고 애플리케이션이 다시 그려지는 단계입니다. 이 메서드는 props 또는 state가 변경될 때 발생합니다.
마운트 해제: 이름에서 알 수 있듯이 마운트 해제는 구성 요소가 페이지에서 제거되는 구성 요소 수명 주기의 마지막 단계입니다.
오류 처리: 이 메서드는 렌더링 중, 수명 주기 메서드 또는 자식 구성 요소의 생성자에 오류가 있을 때 호출됩니다.

후크: 후크를 사용하면 반응 기능을 "후크"할 수 있습니다. 반응 함수 구성 요소 내부와 구성 요소의 최상위 수준에서만 호출할 수 있습니다. 조건부일 수 없습니다. 일부 후크는 다음과 같습니다.
사용 상태
사용 효과
사용 컨텍스트
리듀서 사용
콜백 사용
사용메모
사용 참조
useImperativeHandle
레이아웃 효과 사용
디버그 값 사용