리액트[기초] props

props 란?

• properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다
• props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다
• props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수도 있다 
• props를 렌더링 할 때 에는 JSX 내부에서 {} 기호로 감싸 주면 된다 
• 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다
• 자식 컴포넌트에서는 props의 값을 직접 바꿀수는 없다 

const MyComponent = (props) => {
	// 안녕하세요, 제 이름은 React 입니다.
	return <div> 안녕하세요, 제 이름은 {props.name} 입니다. </div>; 
};
export default MyComponent;

---

부모 컴포넌트에서 props  값 지정하는 방법 

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name = "React"/>;
};
export default App;

---

props의 기본 값 (defaultProps) 설정 

const MyComponent = (props) => {
	// 안녕하세요, 제 이름은 기본 이름 입니다.
	return <div> 안녕하세요, 제 이름은 {props.name} 입니다. </div>;
};

// 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 기본 값 
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

---

클래스형 컴포넌트에서 props 사용

• 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다

// 자식 컴포넌트
import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
	render() {
 	const { name, favoriteNumber, children} = this.props; // 비구조화 할당
   return(
   <div>
   이름은 {name},
   값은 {children},
   숫자는 {favoriteNumber} 입니다.
   </div>
  );
 }
}

MyComponent.defaultProps = {
	name: '기본 이름'
};

MyComponent.propTypes = {
	name: PropTypes.string
    favoriteNumber:PropTypes.number.isRequired
};

export default MyComponent;

/* 클래스형 컴포넌트에서 defaultProps 와 propTypes를 class 내부에서 지정 하는 방법  (static 사용)  */

// 자식 컴포넌트
import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {

	static defaultProps = { // static 사용 
	name: '기본 이름'
};
  	static propTypes = { // static 사용 
	name: PropTypes.string
    favoriteNumber:PropTypes.number.isRequired
};

render() {
 const { name, favoriteNumber, children} = this.props; // 비구조화 할당
   return(
   <div>
   이름은 {name},
   값은 {children},
   숫자는 {favoriteNumber} 입니다.
   </div>
  );
 }
}

export default MyComponent;