FE/React

[React] Propsλž€? μ»΄ν¬λ„ŒνŠΈμ— 데이터 μ „λ‹¬ν•˜λŠ” ν”„λ‘œνΌν‹°

coding_jelly 2023. 1. 29. 18:28

πŸ“Œ  Props λž€ 무엇인가 

- props(property)λž€ μƒμœ„ μ»΄ν¬λ„ŒνŠΈκ°€ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ— 값을 전달할 λ•Œ μ‚¬μš©ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€.

- μƒμœ„ μ»΄ν¬λ„ŒνŠΈκ°€ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ— 값을 μ „λ‹¬ν•˜κΈ° λ•Œλ¬Έμ—  단방ν–₯ 데이터 흐름을 κ°–μŠ΅λ‹ˆλ‹€. 

- λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλŠ” μˆ˜μ • κ°€λŠ₯ν•˜μ§€λ§Œ, μžμ‹ μ»΄ν¬λ„ŒνŠΈλŠ” 읽기만 κ°€λŠ₯ν•©λ‹ˆλ‹€. 

 


πŸ“Œ  Props μ‚¬μš©ν•˜κΈ° : 단방ν–₯ 데이터 흐름 

props λ₯Ό μ‚¬μš©ν•˜λ €λ©΄ 두 단계가 ν•„μš”ν•©λ‹ˆλ‹€.

1) μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ Propsλ₯Ό μ§€μ •ν•˜κ³ , 2) ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ 받은 Props값을 λ Œλ”λ§ν•΄μ•Ό ν•©λ‹ˆλ‹€. 

이 λ•Œ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ ν”„λ‘œνΌν‹°κ°€ μ „λ‹¬λ˜λŠ”λ° 이것이 "단방ν–₯ 데이터 흐름" μž…λ‹ˆλ‹€. 

 

1) μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ Props μ§€μ •ν•˜μ—¬ λ„˜κΈ°κΈ°  

- μ•„λž˜ μ½”λ“œμ—μ„œ App μ»΄ν¬λ„ŒνŠΈκ°€ MyComponent μ»΄ν¬λ„ŒνŠΈλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.  

- App μ»΄ν¬λ„ŒνŠΈμ—μ„œ MyComponent에 props 값을 μ§€μ •ν•΄μ£Όκ² μŠ΅λ‹ˆλ‹€.

- "propValue"λΌλŠ” ν”„λ‘œνΌν‹°λ‘œ "ν—¬λ‘œ λ¦¬μ•‘νŠΈ!"λΌλŠ” 값을 λ„˜κ²¨μ€λ‹ˆλ‹€.

- μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έ 사이에 "Bye λ¦¬μ•‘νŠΈ!" λΌλŠ” 값을 ν•œλ²ˆ λ„£μ–΄μ€„κ²Œμš”. 

 

• App.js

import React from "react";
import MyComponent from "./MyComponent";

function App() {
    return(
         <MyComponent propValue="ν—¬λ‘œ λ¦¬μ•‘νŠΈ!">Bye λ¦¬μ•‘νŠΈ!</MyComponent>
    );
}
export default App;

 

2) ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λ°›μ•„ Props  λ Œλ”λ§ν•˜κΈ° 

MyComponent μ»΄ν¬λ„ŒνŠΈμ—μ„œ μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ λΆ€ν„° 받은 Props 데이터λ₯Ό 뷰에 λ Œλ”λ§ν•©λ‹ˆλ‹€. 

-  {props.propValue}  : μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ props 값을 propsValue둜 μ „λ‹¬ν–ˆκΈ° λ•Œλ¬Έμ— {props.propValue} 둜 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 

{props.children}  : λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έ 사이에 λ‚΄μš©μ„ λ³΄μ—¬μ£ΌλŠ” props μ†μ„±μž…λ‹ˆλ‹€.

  μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ νƒœκ·Έ 사이에 μž‘μ„±ν•œ "Bye λ¦¬μ•‘νŠΈ!" κ°€ 좜λ ₯λ©λ‹ˆλ‹€. 

 

• MyComponent.js

import React from "react";

function MyComponent(props) {
    return(
        <div>
            {props.propValue}, {props.children}
        </div>

    );
}
export default MyComponent;

 

•κ²°κ³Ό ν™”λ©΄  

 


πŸ“Œ  Props νƒ€μž… 

props의 μžλ£Œν˜•μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μžλ£Œν˜•μ„ λͺ¨λ‘ μ‚¬μš© κ°€λŠ₯ν•©λ‹ˆλ‹€. 

⚑ λ¬Έμžμ—΄ νƒ€μž… ν”„λ‘œνΌν‹° 

- ν”„λ‘œνΌν‹° νƒ€μž…μ΄ λ¬Έμžμ—΄μΈ 경우, ν”„λ‘œνΌν‹° 값을 ν‘œν˜„ν•  λ•ŒλŠ” 큰 λ”°μ˜΄ν‘œ("")λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 

<MyComponent name="ν—¬λ‘œ λ¦¬μ•‘νŠΈ!"/>

 

⚑ λ¬Έμžμ—΄ 이외 νƒ€μž…μ˜ ν”„λ‘œνΌν‹° 

- λ¬Έμžμ—΄ νƒ€μž… μ΄μ™Έμ˜ ν”„λ‘œνΌν‹° 값은 μ€‘κ΄„ν˜Έ({ })λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 

<MyComponent 
	boolProp= {true} //boolean
	arrProp= {['a','b','c']} //λ°°μ—΄
	objProp= {{name:'코딩저리', title:'ν—¬λ‘œλ¦¬μ•‘νŠΈ!'}} //객체
	funcProp= {() => { alert('μ•Œλ¦Όμ°½'); }}  //ν•¨μˆ˜ 
/>

 


πŸ“Œ  PropTypes : 데이터 νƒ€μž… κ²€μ¦ν•˜κΈ° 

propTypesλŠ” μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œλΆ€ν„° 전달받은 λ°μ΄ν„°μ˜ νƒ€μž…μ„ ν™•μΈν•˜λŠ” λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. 

μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œλΆ€ν„° 전달받은 propsκ°€ μœ νš¨ν•˜μ§€ μ•Šμ€ νƒ€μž…μ˜ 데이터가 μ „λ‹¬λ˜λŠ” 경우 μ½˜μ†”μ— μ—λŸ¬ 경고문이 좜λ ₯λ©λ‹ˆλ‹€. 

 

⚑ PropTypes 써야 ν•˜λŠ” 이유

μ‹€λ¬΄μ—μ„œ λ¦¬μ•‘νŠΈ 앱이 μ»€μ§€λŠ” 경우 λ‹€μ–‘ν•œ propsκ°€ μ“°μ΄κ²Œ λ©λ‹ˆλ‹€.
νƒ€μž… 검사λ₯Ό ν™œμš©ν•˜λ©΄ νƒ€μž…μœΌλ‘œ μΈν•œ 였λ₯˜ λ°œμƒμ„ 방지 ν•  수 있기 λ•Œλ¬Έμ— props의 μžλ£Œν˜•μ€ 미리 μ„ μ–Έν•΄μ£ΌλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

 

⚑ PropTypes μ‚¬μš©ν•˜κΈ° 전에 

PropTypesλŠ” μ›λž˜ λ¦¬μ•‘νŠΈμ— λ‚΄μž₯ λ˜μ–΄μžˆμ—ˆμœΌλ‚˜ React v15.5λΆ€ν„° λ‹€λ₯Έ νŒ¨ν‚€μ§€λ‘œ μ΄λ™ν–ˆμŠ΅λ‹ˆλ‹€.

 propTypesλ₯Ό μ‚¬μš©ν•˜λ €λ©΄ npm prop-types 라이브러리λ₯Ό μ„€μΉ˜ν•˜κ³  μ»΄ν¬λ„ŒνŠΈ νŒŒμΌμ— PropTypes λ₯Ό import ν•©λ‹ˆλ‹€. 

import PropTypes from 'prop-types';

 

⚑ propTypes μ‚¬μš©ν•˜κΈ° 

propTypesλ₯Ό μ‚¬μš©ν•˜μ—¬ ν”„λ‘œνΌν‹°λ₯Ό μ§€μ •ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. ν”„λ‘œνΌν‹° νƒ€μž… μ²΄ν¬λŠ”  PropType.Typeλͺ… 으둜 μ„ μ–Έ κ°€λŠ₯ν•©λ‹ˆλ‹€.

기본적으둜 arry, bool, func, number, object, string λΆ€ν„° React νƒ€μž…μΈ element, 클래슀 μΈμŠ€ν„΄μŠ€ λ“± νƒ€μž… 체크가 κ°€λŠ₯ν•©λ‹ˆλ‹€. 

 

• App.js 

- μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ name, age, isChecked 속성을 ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ μ „λ‹¬ν•©λ‹ˆλ‹€.

<MyComponent name="코딩저리" age={2} isChecked={false}/>

 

• MyComponent.js

- ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ 전달받은 Props의 νƒ€μž…μ„ μ²΄ν¬ν•©λ‹ˆλ‹€. 

- PropType.string, PropType.bool 둜 propsκ°€ ν•΄λ‹Ή νƒ€μž…μΈμ§€ μ²΄ν¬ν•©λ‹ˆλ‹€. 
- PropType.oneOf(['string','number']) : ν•΄λ‹Ή Propsκ°€ μ—¬λŸ¬ μ’…λ₯˜ μ€‘ν•˜λ‚˜κ°€ 될수 μžˆλŠ” νƒ€μž…μž„μ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

  전달받은 propsκ°€ string, number 쀑 ν•˜λ‚˜μ— ν•΄λ‹Ήν•˜λ©΄ λ©λ‹ˆλ‹€. 

import React from "react";
import PropType from 'prop-types';
function MyComponent(props) {
    return(
        <div>
            {props.name},{props.age}, {props.isChecked ? "true" : "false"}
        </div>
    );
}

MyComponent.prototype = {
    name : PropType.string,
    age : PropType.oneOf(['string','number']),
    isChecked : PropType.bool
}
export default MyComponent;