React 07. props

📑 props

props란?

• "properties"의 줄임말이며, 컴포넌트 간에 데이터를 전달하는 방법을 제공
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 주로 사용되며, 단방향 데이터 흐름을 구현

---

📑 props 특징

1. Read-only

• 읽기 전용으로 부모로부터 전달 받은 props를 자식 컴포넌트에 함수나 컴포넌트 내에서 props를 변경할 수 없다.

2. 다양한 데이터 전달 가능

• props는 문자열, 숫자, 객체, 배열, 함수, 기타 자바스크립트 데이터 유형을 전달할 수 있다.
• React 요소와 컴포넌트를 전달하는 데도 사용할 수 있다.

---

📑 props 사용법

• 문자열을 전달할 때는 큰따옴표(" "), 문자열 외의 값을 전달할 때는 중괄호 { }를 사용

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
	return <ChildComponent name="홍길동">;
}
export default ParentComponent;
      
 
// 자식 컴포넌트
// 방법 1
function ChildComponent(props) {
	return (
      <h1>Hello, {props.name}</h1>
    )
}

// 방법 2
function ChildComponent({name}) {
	return <h1>Hello, {name}</h1>;
}

1. 숫자

// 부모 컴포넌트
function ParentComponent() {
	return <ChildComponent age={20} />;
}

// 자식 컴포넌트
// 방법 1
function ChildComponent(props) {
	return <h1>Age, {props.age}</h1>;
}

// 방법2
function ChildComponent({age}) {
	return <h1>Age, {age}</h1>;
}

2. 스타일

// 부모
function ParentComponent() {
	return <ChildComponent color='red' />;
}

// 자식
function ChildComponent(props) {
	return <h1 style={{color: props.color}}>Hello</h1>;
}

3. 객체

// 부모 컴포넌트
function App() {
    return <Profile user={{name: "홍길동", age: 20}} />;
}

// 자식 컴포넌트
function Profile(props) {
    return <h1>Welcome, {props.user.name}, Age: {props.user.age}</h1>;
}

4. 배열

// 부모 컴포넌트
function App() {
	return <List numbers={[1, 2, 3, 4, 5]}/>;
}

// 자식 컴포넌트
function List(props) {
  	const listItems = props.numbers.map(number =>
    	<li>{number}</li>
    )
	return <ul>{listItems}</ul>;
}

5. 함수

// 부모 컴포넌트
function App() {
    const handleClick = () => {
      console.log("Button clicked!");
    };
	return <Button handleClick={handleClick} />;
}

// 자식 컴포넌트
function Button(props) {
	return <button onClick={props.handleClick}>Click me!</button>;
}

---

📑 props 주의할 점

1. 디폴트 값 설정

• Props를 통해 받아야 하는 값이 없을 경우를 대비하여, 컴포넌트에 디폴트 props를 설정하는 것이 좋음
• React17 이후 함수형 컴포넌트

// 자식 컴포넌트
const MyComponent = ({ message = 'default 값 입력' }) => {
  return <div>{message}</div>;
};

2. 타입 검사

• Props를 전달받을 때, 예상한 타입과 일치하는지 검사하는 것이 좋음, propTypes를 통해 설정 할 수 있음. 이는 유지보수를 돕고, 잠재적인 버그를 미리 방지하는데 도움이 됨

---

📑 PropTypes

PropTypes

• React 컴포넌트가 받아들이는 props의 유형을 검사하는 라이브러리
• 개발 중에 컴포넌트에 잘못된 유형의 props가 전달되었을 때, 경고를 발생시킬 수 있음
• 버그를 빠르게 발견하고, 코드의 품질을 높이는 데 도움이 됨

import PropTypes from 'prop-types';

function UserProfile({ username, age }) {
  return (
    <div>
      <h1>{username}</h1>
      <h2>{age}</h2>
    </div>
  );
}

UserProfile.propTypes = {
  username: PropTypes.string.isRequired,  	// name prop은 반드시 문자열로 전달되어야 하며 필수입니다.
  age: PropTypes.number,             		// age prop은 숫자로 전달되어야 하지만 필수는 아닙니다.
};

export default UserProfile;

• isRequired : 해당 prop이 부모 컴포넌트로부터 반드시 전달 되어야 함을 명시, 전달되지 않으면 콘솔에 경고 메시지 출력