[ReactJS] props

Props는 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

 

1. 기본 사용 props 사용 방법

function Btn({text,big }) { 
	return (
		<button
			style={{
				backgroundColor: "tomato",
				color: "white",
				padding: "10px, 20px",
				border: 0,
				borderRadius: 10
				fontSize: big ? 18 : 16
			}}
		>
		{text}
		</button>
}

function App(){
	return (
		<div>
			<Btn text="Save Change" big={false}/>
			<Btn text="Continue"/>
		</div>
	);
}
export default App;

• props는 첫 번째이자 유일한 인자입니다. 인자로 obejct로 넘어온다.
  ex)   {text:"Save Change", big:false} 
• props는 object이기 때문에 “{}”중괄호를 열어 원하는 값만 뽑아올 수 있다.
  function Btn(props)  =>  function Btn({text,big })    (ES6 문법)

 

 

 

---

2. 이벤트 리스너 사용 방법

(전체 코드)

function Btn({text, onClick}) { 
	return (
		<button
			onClick={onClick}
			style={{
				backgroundColor: "tomato",
				color: "white",
				padding: "10px, 20px",
				border: 0,
				borderRadius: 10
				fontSize: big ? 18 : 16
			}}
		>
		{text}
		</button>
}

function App(){
	const [value, setValue] = useState("Save Change");
	const changeValue = () => setValue("Revert Change"); 
	return (
		<div>
			<Btn text={value} onClick={changeValue}/> 
			<Btn text="Continue"/>
		</div>
	);
}

 

<Btn text={value} onClick={changeValue}/>

• 컴포넌트에 이벤트 리스너를 작성하면 이벤트가 아닌 단순 prop으로 이벤트가 작동하지 않는다.

 

function Btn({text, onClick}) { 
	return (
		<button
			onClick={onClick}
			style={{
				backgroundColor: "tomato",
				color: "white",
				padding: "10px, 20px",
				border: 0,
				borderRadius: 10
			}}
		>
		{text}
		</button>
}

• 컴포넌트 내부에서 받아온 prop을 활용하여 반드시 이벤트 리스너를 추가해주어야 한다.

 

 

---

3. React Memo

부모의 state가 변경되면 모든 자식 들은 다시 그려진다(re-render) 하지만, memo 함수를 이용하여 변경된 자식만 re-render할 수 있다.

const MemorizedBtn = React.memo(Btn);

 

 

(전체 코드)

function Btn({text, onClick}) { 
	return (
		<button
			onClick={onClick}
			style={{
				backgroundColor: "tomato",
				color: "white",
				padding: "10px, 20px",
				border: 0,
				borderRadius: 10
				fontSize: big ? 18 : 16
			}}
		>
		{text}
		</button>
}
const MemorizedBtn = React.memo(Btn);   // 컴포넌트를 담는다.
function App(){
	const [value, setValue] = useState("Save Change");
	const changeValue = () => setValue("Revert Change"); 
	return (
		<div>
			<MemorizedBtn text={value} onClick={changeValue}/> 
			<MemorizedBtn text="Continue"/>   // props가 변경되지 않으니 re-render하지 않음.
		</div>
	);
}

 

 

---

4. prop-type

컴포넌트에 많은 props를 가질때 잘못된 prop을 전달한다든가 여러가지 문제가 발생할 수 있다.

 

4-1) prop-type 라이브러리 설치

 

4-2) 사용 방법

Btn.propTypes = {
	text: PropTypes.string,
	fontSize: PropTypes.number.isRequired,
}

• 필수적인 prop이 필요하다면 isRequired을 붙여준다.

 

4-3) 잘몬된 props 전달할 경우

function Btn({text, fontSize = 14}) { //  fontSize값이 존재하지 않으면 14로 지정
	return (
		<button
			style={{
				backgroundColor: "tomato",
				color: "white",
				padding: "10px, 20px",
				border: 0,
				borderRadius: 10,
				fontSize  // 속성과 prop의 이름이 같으면 생략 가능
			}}
		>
		{text}
		</button>
}
Btn.propTypes = {
	text: PropTypes.string.isRequired,
	fontSize: PropTypes.number
}
function App(){
	return (
		<div>
			<Btn text={"Save Change"} fontSize={18}/> 
			<Btn text={14} fontSize={"Continue"} /> // text와 fontSize를 반대로 전달
		</div>
	);
}

• 해당 설정으로 인해 오류 발생시 console 창에서 상세한 확인이 가능하다.

•  propTypes의 앞 p가 소문자인걸 주의
• state로 데이터를 보낼 때는 사용하지 않지만 특정 props들을 보낼때는 사용