React에서 Props 및 PropTypes 마스터하기

props와 PropTypes가 당신을 혼란스럽게 합니까? 당신은 혼자가 아닙니다. props와 PropTypes에 대한 모든 것을 안내해 드리겠습니다. React 앱을 개발할 때 삶을 훨씬 더 쉽게 만들 수 있습니다. 이 튜토리얼에서는 props, props 전달 및 액세스, props를 사용하여 모든 구성 요소에 정보 전달에 대한 세부 정보를 소개합니다.

React 애플리케이션을 빌드하려면 UI를 여러 구성 요소로 나누는 것이 포함되며, 이는 한 구성 요소에서 다른 구성 요소로 데이터를 전달해야 함을 의미합니다. Props는 React 구성 요소 간에 정보를 전달하는 중요한 메커니즘이며 우리는 이에 대해 자세히 살펴볼 것입니다. 이 기사는 구성 요소가 올바른 데이터 유형을 사용하고 올바른 데이터를 전달하도록 하기 때문에 PropTypes를 살펴보지 않고는 불완전합니다.

PropTypes를 사용하여 props로 얻은 데이터의 유효성을 검사하는 것은 항상 좋은 방법입니다. 또한 React에서 PropTypes 통합, PropTypes로 유형 검사 및 defaultProps 사용에 대해 배웁니다. 이 튜토리얼이 끝나면 props와 PropTypes를 효과적으로 사용하는 방법을 이해하게 될 것입니다. React가 어떻게 작동하는지에 대한 기본 지식을 이미 가지고 있는 것이 중요합니다.

소품 이해하기

React를 사용하면 props(속성의 줄임말)라는 것을 사용하여 구성 요소에 정보를 전달할 수 있습니다. React는 여러 구성 요소로 구성되어 있기 때문에 props를 사용하면 이를 필요로 하는 구성 요소 간에 동일한 데이터를 공유할 수 있습니다. 단방향 데이터 흐름(상위-하위 구성 요소)을 사용합니다. 그러나 콜백 함수를 사용하면 props를 자식 구성 요소에서 부모 구성 요소로 다시 전달할 수 있습니다.

이러한 데이터는 숫자, 문자열, 배열, 함수, 개체 등 다양한 형식으로 나타날 수 있습니다. HTML 태그에서 속성을 선언할 수 있는 것처럼 모든 구성 요소에 props를 전달할 수 있습니다. 아래 코드를 살펴보십시오.

 <PostList posts={postsList} />

이 스니펫에서 우리는 posts 라는 prop을 PostList 라는 컴포넌트에 전달하고 있습니다. 이 소품의 값은 {postsList} 입니다. 데이터에 액세스하고 전달하는 방법을 분석해 보겠습니다.

Prop 전달 및 액세스

이 튜토리얼을 흥미롭게 만들기 위해 사용자의 이름과 게시물 목록을 표시하는 애플리케이션을 만들어 보겠습니다. 앱 데모는 아래와 같습니다.

앱은 구성 요소 모음( App 구성 요소, PostList 구성 요소 및 Post 구성 요소)으로 구성 됩니다.

게시물 목록에는 content 및 사용자 name 과 같은 데이터가 필요합니다. 다음과 같이 데이터를 구성할 수 있습니다.

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

그런 다음 데이터를 가져오기 위해 App 구성 요소가 필요합니다. 해당 구성 요소의 기본 구조는 다음과 같습니다.

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

여기에서 우리는 PostList (조금 후에 생성할)에 대한 소품으로 게시물 배열을 전달합니다. 상위 구성 요소인 PostList 는 postsList 의 데이터에 액세스합니다. 이 데이터는 하위 구성 요소( Post )에 posts 소품으로 전달됩니다. 기억하시겠지만, 저희 앱은 세 가지 구성 요소로 구성되어 있으며 계속 진행하면서 만들 것입니다.

PostList 를 만들어 봅시다.

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

PostList 구성 요소는 posts 을 소품으로 받습니다. 그런 다음 posts prop인 this.props.posts 를 반복하여 게시된 각 항목을 Post 구성 요소로 반환합니다(나중에 모델링함). 또한 위의 스니펫에서 key 사용에 유의하십시오. React를 처음 사용하는 사람들에게 키는 목록의 각 항목에 할당된 고유 식별자로, 항목을 구별할 수 있습니다. 이 경우 키는 각 게시물의 id 입니다. 두 항목이 동일한 id 를 가질 가능성은 없으므로 이 용도로 사용하기에 좋은 데이터입니다.

한편 나머지 속성은 Post 구성 요소( <Post {...post} /> )에 소품으로 전달됩니다.

이제 Post 구성 요소를 만들고 그 안의 소품을 활용해 보겠습니다.

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

PostList 구성 요소에 대해 했던 것처럼 클래스 구성 요소로 정의하는 대신 Post 구성 요소를 기능 구성 요소로 구성합니다. this.props 를 사용하여 클래스 구성 요소에서 액세스하는 방법과 비교하여 기능 구성 요소에서 소품에 액세스하는 방법을 보여주기 위해 이 작업을 수행했습니다 . 이것은 기능적 구성 요소이기 때문에 props 를 사용하여 값에 액세스할 수 있습니다 .

이제 props를 전달하고 액세스하는 방법과 한 구성 요소에서 다른 구성 요소로 정보를 전달하는 방법을 배웠습니다. 이제 소품이 함수와 어떻게 작동하는지 살펴보겠습니다.

Props를 통한 함수 전달

이전 섹션에서 한 구성 요소에서 다른 구성 요소로 데이터 배열을 소품으로 전달했습니다. 하지만 대신 함수로 작업한다면 어떻게 될까요? React를 사용하면 컴포넌트 간에 함수를 전달할 수 있습니다. 이것은 자식 구성 요소에서 부모 구성 요소의 상태 변경을 트리거하려는 경우에 유용합니다. Props는 변경 불가능해야 합니다. prop의 값을 변경하려고 하면 안 됩니다. 이를 전달하는 구성 요소(부모 구성 요소)에서 이 작업을 수행해야 합니다.

클릭 이벤트를 수신하고 앱의 상태를 변경하는 간단한 데모 앱을 만들어 보겠습니다. 다른 구성 요소에서 앱의 상태를 변경하려면 상태를 변경해야 하는 구성 요소에 함수를 전달해야 합니다. 이런 식으로 상태를 변경할 수 있는 기능을 자식 구성 요소에 갖게 됩니다.

약간 복잡하게 들리나요? 버튼 클릭으로 상태를 변경하고 환영 정보를 렌더링하는 간단한 React 애플리케이션을 만들었습니다.

위의 데모에는 두 가지 구성 요소가 있습니다. 하나는 앱의 상태와 상태를 설정하는 함수를 포함하는 상위 구성 요소인 App 구성 요소입니다. 이 시나리오에서 ChildComponent 는 자식이 될 것이며 그 임무는 상태가 변경될 때 환영 정보를 렌더링하는 것입니다.

이것을 코드로 분해해보자:

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

상태를 true 로 설정했고 상태를 변경하는 메서드가 App 구성 요소에 생성되었음을 주목하세요. render() 함수에서 앱의 상태를 prop isShow 로 ChildComponent 구성 요소에 전달합니다. 또한 clickMe 라는 prop으로 toggleShow() 함수를 전달합니다.

우리는 이것을 다음과 같은 ChildComponent 에서 사용할 것입니다:

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

위에서 가장 중요한 것은 App 구성 요소가 함수를 ChildComponent 에 소품으로 전달한다는 것입니다. clickMe() 함수는 ChildComponent 의 클릭 핸들러에 사용되는 반면, ChildComponent 는 함수의 논리를 알지 못합니다. 버튼이 클릭되었을 때만 함수를 트리거합니다. 상태는 함수가 호출될 때 변경되며, 상태가 변경되면 상태가 다시 prop으로 전달됩니다. 우리의 경우 자식과 같이 영향을 받는 모든 구성 요소가 다시 렌더링됩니다.

앱의 상태 isShow 를 isShow 에 소품으로 전달해야 합니다. ChildComponent 없으면 상태가 업데이트될 때 greeting 을 표시하는 위의 로직을 작성할 수 없기 때문입니다.

함수를 살펴보았으므로 이제 유효성 검사로 넘어가겠습니다. PropTypes를 사용하여 props를 통해 얻은 데이터의 유효성을 검사하는 것은 항상 좋은 방법입니다. 이제 자세히 살펴보겠습니다.

React에서 PropTypes는 무엇입니까?

PropTypes는 구성 요소가 올바른 데이터 유형을 사용하고 올바른 데이터를 전달하고 구성 요소가 올바른 유형의 props를 사용하고 수신 구성 요소가 올바른 유형의 props를 수신하도록 하는 메커니즘입니다.

애완 동물 가게에 배달되는 강아지와 같다고 생각할 수 있습니다. 애완 동물 가게는 돼지, 사자, 개구리 또는 도마뱀붙이를 원하지 않고 강아지를 원합니다. PropTypes는 올바른 데이터 유형(강아지)이 다른 종류의 동물이 아닌 애완동물 가게에 전달되도록 합니다.

위 섹션에서 props를 사용하여 모든 구성 요소에 정보를 전달하는 방법을 보았습니다. props를 컴포넌트의 속성으로 직접 전달했고 컴포넌트 외부에서 props를 전달하여 해당 컴포넌트에서 사용했습니다. 그러나 우리는 props를 통해 컴포넌트에서 어떤 유형의 값을 얻는지 또는 모든 것이 여전히 작동하는지 확인하지 않았습니다.

props를 통해 구성 요소에서 얻은 데이터의 유효성을 검사할지 여부는 전적으로 우리에게 달려 있습니다. 그러나 복잡한 응용 프로그램에서는 항상 해당 데이터의 유효성을 검사하는 것이 좋습니다.

PropType 사용

PropTypes를 사용하려면 명령줄에서 다음 코드를 실행하여 npm 또는 Yarn을 통해 애플리케이션에 종속성으로 패키지를 추가해야 합니다. npm의 경우:

 npm install --save prop-types

그리고 원사의 경우:

 yarn add prop-types

PropTypes를 사용하려면 먼저 prop-types 패키지에서 PropTypes를 가져와야 합니다.

 import PropTypes from 'prop-types';

사용자의 게시물을 나열하는 앱에서 ProType을 사용합시다. 다음은 Post 구성 요소에 사용하는 방법입니다.

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

여기에서 PropTypes.string 및 PropTypes.number 는 수신된 prop이 올바른 유형인지 확인하는 데 사용할 수 있는 prop 유효성 검사기입니다. 위의 코드에서 id 는 숫자로 선언하고 content 와 user 는 문자열로 선언합니다.

또한 PropTypes는 버그를 잡는 데 유용합니다. 그리고 isRequired 를 사용하여 소품 전달을 강제할 수 있습니다.

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypes에는 많은 유효성 검사기가 있습니다. 다음은 가장 일반적인 몇 가지입니다.

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

React의 문서에서 확인할 수 있는 더 많은 유형을 사용할 수 있습니다.

기본 소품

props를 사용하여 일부 기본 정보를 구성 요소에 전달하려는 경우 React는 defaultProps 라는 것으로 그렇게 할 수 있습니다. PropTypes가 선택 사항인 경우(즉, isRequired 를 사용하지 않는 경우) defaultProps 를 설정할 수 있습니다. 기본 props는 아무 것도 전달되지 않는 경우를 대비하여 props에 값이 있는지 확인합니다. 다음은 예입니다.

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

여기에서 defaultProps 는 부모 구성 요소에서 지정하지 않은 경우 this.props.name 에 값이 있는지 확인하는 데 사용됩니다. Profile 클래스에 이름이 전달되지 않으면 대체할 기본 속성 Stranger 가 있습니다. 이것은 prop이 전달되지 않을 때 오류를 방지합니다. 모든 선택적 PropType에 대해 항상 defaultProps 를 사용하는 것이 좋습니다.

결론

이 튜토리얼을 통해 즐겁게 작업하셨기를 바랍니다. props와 propTypes가 React 애플리케이션을 빌드하는 데 얼마나 중요한지 보여주길 바랍니다. props와 propType이 없으면 상호 작용이 발생할 때 구성 요소 간에 데이터를 전달할 수 없기 때문입니다. 그것들은 React가 설계된 구성 요소 중심 및 상태 관리 아키텍처의 핵심 부분입니다.

PropTypes는 구성 요소가 올바른 데이터 유형을 사용하고 올바른 데이터를 전달하고 구성 요소가 올바른 유형의 props를 사용하고 수신 구성 요소가 올바른 유형의 props를 수신하도록 하는 보너스입니다.

질문이 있는 경우 아래의 댓글 섹션에 질문을 남길 수 있습니다. 모든 질문에 기꺼이 답변하고 문제를 해결해 드리겠습니다.

참고문헌

• "React에서 생각하기", React Docs
• "목록과 키", React Docs
• "PropTypes를 사용한 유형 검사", React Docs
• "리액트에서 컴포넌트에 props를 전달하는 방법", Robin Wieruch