4장. React Props 사용
8374 단어 ReactdefaultPropsPropsstudyProps
📌 Props란?
- 컴포넌트 끼리 값을 전달하는 수단
- 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다.
(하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함)- 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능
💡 defaultProps
- 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정
설정 방법-1 (최신 방식)
render() 윗 부분에 작성
static defaultProps = { name: '기본이름' };
설정 방법-2
class 밑(밖)에서 설정
class명.defaultProps = { name: 'OnceDeveloper' };
📝 실습 코드
App.js
import React, { Component, Fragment } from 'react'; import MyName from './MyName'; // class App extends Component { render() { return <MyName name="리액트" />; } } // export default App;
Class형 컴포넌트 이용한 MyName.js
import React, { Component } from 'react'; // class MyName extends Component { //defaultProps 첫번째 방법 (최신 방식) static defaultProps = { name: '기본이름' }; render() { return ( <div> 안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다. </div> ); } } //defaultProps 두번째 방법 MyName.defaultProps = { name: 'OnceDeveloper' }; // export default MyName;
함수형 컴포넌트 이용한 MyName.js
기능 없이 받아서 보여주기만 하는 경우 주로 이용
코드의 상단에 { Component } 를 import하지 않아도 됨.
import React from 'react'; // const MyName = ({name}) => { return ( <div> 안녕하세요 ! 제 이름은 {name} 입니다. </div> ) }; // MyName.defaultProps = { name : 'OnceDeveloper' } // export default MyName;
결과 Page 1 : App.js에서 props를 호출
결과 Page 2 : defaultProps 적용
유튜버 출처 : Minjun Kim
Author And Source
이 문제에 관하여(4장. React Props 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@once_developer/4장.-React-Props-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)