[React] React Props

props

• 컴포넌트 간에 속성을 전달하고 동적으로 데이터를 렌더링
• React에서 props는 컴포넌트 사용 시 부모 컴포넌트에서 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용 가능
• 모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 처럼 동작 해야함
• 단방향 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트로 값을 전달
• 부모 컴포넌트 : 수정 가능 / 자식 컴포넌트 : 읽기만 가능
• props는 설계서를 별도로 가지고 있는게 좋음

---

Props Type 지정

• String 타입 : 따옴표 사용 : " 
• String 이외 타입 : 중괄호 사용 :  { }

// String Type
<Component name="string date"/>

// exculde String Type
<Component
	 number={1}
     array={[1,2,3]}
     object={[name: 'obj']} 
	 func = {()=>alert('1) 
     bool={true}}
   />

---

prop 사용방법

1. JSX에서의 props 렌더링

• 컴포넌트 함수의 파라미터로 받아와 사용가능
• {} 기호로 감싸 props로 렌더링

// [TempComponent.js]
import React from 'react'

const TempComponent = (props)=> {
	return <h1>{props.name}</h1>
}

export default TempComponent

2. props 값 설정

• 부모 컴포넌트에서 props의 값을 설정

// [App.js]
import TempComponent from './tempComponent'
function App() {
	return (
		<div>
			<TempComponent name="John" />
		</div>
	)
}

export default App

---

props 기본값

• props의 따로 값을 지정하지 않아도 나타나는 기본값 설정 가능
• 기본 문법

// [형식]
컴포넌트명.defaultProps = {
	name  : 값
}

// [TempComponent.js]
const TempComponent = (props) => {
	return <h1>{props.name}</h1>
}

TempComponent.defaultProps = {
	name: 'basic',
}

export default TempComponent

// [App.js]
import TempComponent from './tempComponent'
function App() {
	return (
		<div>
			<TempComponent />
		</div>
	)
}

export default App

 

---

children props

• 생성 컴포넌트 태그 사이의  내용을보여주는 역할
• 기본 형식

const 컴포넌트 = (props) => {
	return <h1> {props.children}</h1>
}

// [App.js]
import TempComponent from './tempComponent'

function App() {
	return (
		<div>
			<TempComponent>React</TempComponent>
		</div>
	)
}

export default App


// [TempComponent.js]
const TempComponent = (props) => {
	return <h1> {props.children}</h1>
}

export default TempComponent

---

비구조화 할당(구조 분해 문법)을 통한 props 내부 값 추출

• ES6 비구조화 할당 문법을 사용하여 props 키워드 없이 내부 값을 추출 가능
• 기본 문법

const 컴포넌트명 = (props) => {
	const {속성1, 속성2} = props
	return <h1> {속성1}, {속성2}</h1>


// 함수의 파라미터가 객체인 경우 바로 비구조화 하여 사용 가능
const 컴포넌트명 = ({속성1, 속성2}) => {
	return <h1> {속성1}, {속성2}</h1>
}

// [TempComponent.js]
const TempComponent = (props) => {
	const {name, children} = props
	return <h1> {name}, {children}</h1>
}

export default TempComponent

// [App.js]
import TempComponent from './TempComponent'

function App() {
	return (
		<div>
			<TempComponent name="John">React</TempComponent>
		</div>
	)
}

export default App

---

propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용
• propTypes에서 지정한 타입이 사용되지 않을 경우 콘솔 에러창에 error 가 표시

사용순서

1 prototypes import

import PropTypes from 'prop-types'

2. 컴포넌트 propTypes 설정

// [기본문법]
컴포넌트명.propTypes = {
	속성 : propTypes.지정할 타입
}

// [TempComponent.js]
import PropTypes from 'prop-types'
const TempComponent = ({name, children}) => {
	return <h1> {name}, {children}</h1>
}

TempComponent.propTypes= {
	name : PropTypes.string // name의 타입을 지정
}

export default TempComponent

propTypes의 필수 지정  : isRequired

• 필수로 지정해야하는 경우 사용
• propTypes를 지정하지 않을 때 경고메시지를 발생
• 기본 문법

컴포넌트명.propTypes= {
	속성 : PropTypes.타입.isRequired
}

// [TempComponent.js]
import PropTypes from 'prop-types'
const TempComponent = ({age, children}) => {
	return <h1> {age}, {children}</h1>
}

TempComponent.propTypes= {
    age : PropTypes.number.isRequired
}

export default TempComponent

PropTypes 종류

• array
• arrayOf : 특정 PropTypes로이루어진 배열 ex) arrayOf(PropTypes.number : 숫자로 이루어진 배열)
• bool
• func
• number
• string
• object
• node : 렌더링 가능한모든 것 (숫자, 문자, jsx코드, chlldren.)
• instancdOf(클래스) : 특정 클래스의 인스턴스 ex) instanceOf(클래스명)
• oneOf(배열) : 배열요소 중 하나 ex) oneOf(['ba', 'cd'])
• oneOfType(배열종류) : 주어진 배열 종류 중 하나  ex)oneOfType([React.PropTypes.string, PropTypes.number])
• objectOf(React.PropTypes.타입) : 객체의 모든 키 값이 인자로 주어진  PropTypes인 객체 ex) objectOf([React.PropTypes.number)
• shape(스키마) : 주어진 스키마를 가진 객체 ex) shape({name: PropTypes.string}, {age : PropTypes.number}} 
• any : 종류 상관없음

---

Class Component의 props 

• 클래스 컴포넌트에서 props 사용 시 render 함수 내에서 this.props를 사용
• defaultProps와 propTypes 설정은 클래스의 내/외부에서 모두 선언 가능

import { Component } from 'react'
import PropTypes from 'prop-types'

class TempComponent extends Component {
	render() {
		const { name, age, children } = this.props
		return (
			<>
				{name},{age}, {children}
			</>
		)
	}
}

TempComponent.propTypes = {
	name: PropTypes.string,
	age: PropTypes.number,
}

export default TempComponent

Exam Basic Sources

• Class 컴포넌트 예시

 

import { Component } from 'react';

// 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전닫하고 렌더링 할 수 있음

// 부모 컴포넌트
class ParentComponent extends Component {
	render(){
    // 1. 부모 컴포넌트에서 props를 지정하여 자식 컴포넌트에 넘기기
		return <ChildComponent name="Jane" age={30}/>
	}
}


// 자식 컴포넌트
class ChildComponent extends Component {
	render(){
		return (
			<>
            // 2. 하위 컴포넌트에서 받아온 props를 렌더링하기
			Name : {this.props.name}
			age : {this.props.age}
			</>
		)
	}
}

export default App;

• 함수  컴포넌트 예시

// ----- [App.js]
import ChildComponent from './ChildComponent'
const App = () => {
  return (
    <>
     <ChildComponent name="Jane"  age={30}/>
    </>
  );
};

export default App;


// ----- [ChildComponent.js]
const ChildComponent = (props) => {
  return (
    <>
      <p>
        Name : {props.name}, Age : {props.age}
      </p>
    </>
  );
};

export default ChildComponent;

---

props 사용 방법

1. props에 변수와 데이터를 모두 받아오는 방식
2. props로 받아온 데이터를 변수로 선언하여 사용 (props에 넘어오는 데이터가 많은 경우 적합)
3. 데이터값만 받는 방식 (메모리가 절약되나, 헷갈릴 수 있어 사용 지양)

function App() {
  return (
    <>props
      <Hello name='John' />
      <Hello2 name='Jane' />
      <Hello3 name='Jack' />
    </>
  );
}

// 방법 1 : props에 변수와 데이터를 모두 받아옴
const Hello = (props) => {
  return <p>Hello {props.name}</p>;
};

// 방법 2 : props를 받아 변수 선언 후 데이터를 사용
const Hello2 = (props) => {
  const name = props.name;
  return <p>HELLO2 {name}</p>;
};

// 방법3 : 데이터 값만 받아오는 방식
const Hello3 = ({name}) => {
  return <p>Hello {name}</p>;
};



export default App;

---

Sources

• 구구단 (for문)
• 구구단 (spread &  map 활용)
• 구구단 (Array & map 활용)