React는 다른 프레임워크와 데이터 흐름 및 조작에 대한 접근 방식이 다르기 때문에 처음에는 props, state 등과 같은 일부 개념을 이해하기 어려울 수 있습니다.

따로 포스팅을 통해 계속 설명하는 것이 좋을 것 같으며, 이번 블로그 포스트에서는 React의 Props 기능과 사용 방법에 대해 집중적으로 다루도록 하겠습니다.

소품이란 무엇입니까?

React는 UI를 재사용 가능한 작은 조각(또는 구성 요소)으로 나누는 구성 요소 기반 라이브러리입니다. 경우에 따라 이러한 구성 요소는 통신(서로 데이터 전송)해야 하며 구성 요소 간에 데이터를 전달하는 방법은 props를 사용하는 것입니다.

state와 props의 가장 큰 차이점은 props는 변경할 수 없다는 것입니다. 이것이 컨테이너 구성 요소가 업데이트 및 변경될 수 있는 상태를 정의해야 하는 반면 자식 구성 요소는 props를 사용하여 상태의 데이터만 전달해야 하는 이유입니다.

이러한 값은 문자열, 객체(배열 및 함수 포함) 등 무엇이든 될 수 있습니다. 그들은 우리에게 우리의 구성 요소를 더 동적으로 만들고 훨씬 더 재사용할 수 있는 기회를 제공합니다.

React에서 소품 사용

먼저 속성과 해당 값을 정의합니다.

소품을 사용하여 하위 구성 요소로 전달합니다.

소품 데이터를 렌더링합니다.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
      </h1>
    );
  }
}

다음에는 자식 구성 요소가 있습니다.

const ChildComponent = () => {  
  return <p>I'm the 1st child!</p>; 
};

자식 구성 요소를 재사용하려면 문제가 발생합니다.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </h1>
    );
  }
}

이 경우 부모 구성 요소는 동일한 메시지를 3번 렌더링합니다.

대신 여기서 우리가 하고 싶은 것은 동적 출력을 얻는 것입니다. 이렇게 하면 props를 사용하여 각 하위 구성 요소가 서로 다른 데이터를 가질 수 있습니다.

속성 및 해당 값 정의

HTML 태그에 속성과 값을 할당할 수 있다는 것을 이미 알고 있습니다.

<a href="www.dev.to">Click here to visit Dev</a>;

자체 속성을 정의하고 값을 할당하여 React 구성 요소에 대해 동일한 작업을 수행할 수 있습니다.

<ChildComponent someAttribute={value} anotherAttribute={value}/>

text 속성을 ChildComponent에 선언한 다음 문자열 값을 할당합니다: “I’m the 1st child” .

<ChildComponent text={“I’m the 1st child”} />

ChildComponent는 이제 property와 value를 가집니다. 다음 단계는 소품으로 전달하는 것입니다.

소품을 자식 구성 요소로 전달

이제 "내가 첫째야!"문자열을 만들고 props를 사용하여 전달합니다.

전달 소품은 매우 간단합니다. 함수에 인수를 전달하는 것처럼 props를 React에 전달하고component props는 필요한 모든 데이터를 가져옵니다.

const ChildComponent = (props) => {  
  return <p>Render the props here!</p>; 
};

시원한! 지금까지 속성과 해당 값을 생성한 다음 소품을 통해 전달했지만 아직 ChildComponent에서 렌더링하지 않았기 때문에 여전히 볼 수 없습니다.

렌더링 소품으로 이동하기 전에 소품을 반환할 때console.log 객체를 반환한다는 점에 유의하십시오.

Object {text: "I'm the first child"}

Javascript 개체에 대한 이전 게시물을 기억한다면. 점 표기법으로 객체의 요소에 액세스할 수 있습니다. 이제 보간을 사용하여 텍스트 속성을 렌더링할 수 있습니다.

const ChildComponent = (props) => {  
  return <p>{props.text}</p>; 
};

빠른 참고: 소품을 렌더링하는 데 this를 사용하지 않는 것을 확인하십시오. 이는 우리 예제에서 클래스 구성 요소가 아닌 기능적 구성 요소를 사용하기 때문입니다.

이제 ParentComponent에 마운트된 다른 형제 구성 요소에 소품을 추가해 보겠습니다.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent text={"I'm the 1st child"} />
        <ChildComponent text={"I'm the 2nd child"} />
        <ChildComponent text={"I'm the 3rd child"} />
      </h1>
    );
  }
}

거기에 있습니다! 하위 구성 요소에 소품을 성공적으로 전달하고 개별 소품 데이터를 렌더링했습니다.

결론

Props는 '속성'을 나타내며 특별한 React 키워드입니다.

소품이 구성 요소에 전달됩니다.

소품은 단방향(부모에서 자식으로)으로만 구성 요소에 전달될 수 있습니다.

Props 데이터는 변경할 수 없습니다(읽기 전용).