반응 소품과 상태의 차이점

react의 핵심 개념 중 하나는 props와 state의 차이입니다. 소품 및 상태 트리거의 변경 사항만 구성 요소를 다시 렌더링하고 DOM을 업데이트하는 데 반응합니다.

가장 큰 차이점은 상태의 입력을 기반으로 구성 요소를 다시 렌더링하는 것은 전적으로 구성 요소 내에서 수행되는 반면, props를 사용하면 구성 요소 외부에서 새 데이터를 수신하고 다시 렌더링할 수 있다는 것입니다.

소품

props를 사용하면 부모 구성 요소에서 자식 구성 요소로 데이터를 전달할 수 있습니다.

//Parent Component
const books = () => {
    return (
<div>
 <Book title = "Data structures and algorithms with JAVA" />
 </div>
   );
}
//Child component
const book = (props) => {
    return ( 
        <div>
            <h1>{props.title}</h1>
        </div>
    )
}

설명: 지금. 'props'는 하위 구성 요소에 전달되고 기능적 구성 요소는 'props'를 인수로 전달하여 개체로 처리됩니다. 속성 '제목'은 상위 구성 요소의 하위 구성 요소에서 액세스할 수 있습니다.

상태

클래스 기반 반응 구성 요소만 상태를 정의하고 사용할 수 있습니다. 기능 구성 요소에 상태를 전달할 수는 있지만 기능 구성 요소는 상태를 직접 편집할 수 없습니다.

class NewBook extends Component {
    state = {
        number: ''
    };
    render() {
        return ( 
            <div>{this.state.number}</div>
        );
    }
}

보시다시피 NewBook ​​구성 요소에는 정의된 상태가 포함되어 있습니다. 이 상태는 this.state.number를 통해 액세스할 수 있으며 render() 메서드에서 반환될 수 있습니다.