반응 - 기능적 구성 요소에 대한 기본 소품 설정

React에서 우리는 props를 사용하여 상위 구성 요소에서 하위 구성 요소로 값을 전달합니다. 기능적 구성 요소를 만들 때 props로 전달된 일부 값이 없을 수 있음을 고려해야 합니다.

여기에서 기본 props가 필요합니다. 오늘의 튜토리얼은 두 가지 접근 방식을 사용하여 React의 기능적 구성 요소에 대한 기본 props를 설정하는 방법을 보여줍니다.

반응 - 기능적 구성 요소에 대한 기본 props 설정

React에서 기능적 구성 요소에 대한 기본 props를 설정하는 방법에는 두 가지가 있습니다. 여기에서는 두 가지 방법에 대해 토론하고 배우고 어느 것이 더 나은지 강조합니다.

기능 정의에서 기본 매개변수 설정

첫 번째 접근 방식은 JavaScript의 기본 매개변수 기능을 사용하는 것입니다. 아래의 예를 살펴보겠습니다.

export default function App() {
  return (
    <div className="App">
      <Child firstName="George" lastName="Smith" />
    </div>
  );
}
function Child({ firstName = "Irakli", lastName = "Tchigladze" }) {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
}

위의 예와 같이 상위 구성 요소가 firstName 및 lastName props를 전달하면 상위 구성 요소에 지정된 값이 기본값을 대체합니다.

이러한 props가 전달되지 않으면 하위 구성 요소는 기본 매개 변수로 설정된 값을 사용합니다.

이제 <Child /> 컴포넌트에 설정된 props를 삭제해 보십시오. 자식 구성 요소는 페이지에서 텍스트를 렌더링하기 위해 이러한 값이 필요합니다.

기본 매개변수를 설정하지 않은 경우 필요한 값을 전달하지 않으면 firstName이 정의되지 않음과 같은 오류가 발생합니다.

기본 매개변수를 설정하면 이 오류를 방지할 수 있습니다. 따라서 대신 <Child> 구성 요소는 이러한 변수를 기본 매개변수로 대체합니다.

defaultProps 매개변수를 사용하여 기본 매개변수 설정

기본값을 설정하는 또 다른 방법은 defaultProps 속성을 사용하는 것입니다. 이 방법을 사용하여 이전 예제를 다시 작성해 보겠습니다.

const Child = ({ firstName = "Irakli", lastName = "Tchigladze" }) => {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
};

Child.defaultProps = { firstName: "Irakli", lastName: "Tchigladze" };

이 경우 defaultProps 속성을 다른 개체와 동일하게 설정합니다. 하위 구성 요소는 상위 구성 요소에서 props가 전달되지 않은 경우 이 객체로 기본 설정됩니다.

이 구문은 몇 줄의 추가 코드가 필요하지만 비교적 간단합니다.

그러나 더 큰 문제는 React의 저명한 인물 중 한 명인 Dan Abramov에 따르면 defaultProps 속성에 대한 기능 구성 요소의 지원이 더 이상 사용되지 않을 것이라고 합니다.

프로젝트의 장기적인 안정성에 신경을 써야 한다고 생각한다면 defaultProps 속성을 사용하여 기본 소품을 설정하는 것보다 기본 매개변수를 사용하는 것이 좋습니다.