느그 컴포넌트 머하시노! : React props 👨‍🏫

1. React props🧬

01. props란?
속성 property의 준말로, 부모 컴포넌트로부터 자식 컴포넌트로 전달할 수 있는 사용자 정의 속성을 뜻한다. 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하며 단방향 데이터 흐름을 갖는다. 그렇기 때문에, 하위 컴포넌트에서 props를 수정할 수 없다. 즉, 읽기 전용 데이터이다.
props는 부모 컴포넌트가 자식컴포넌트에게 넘겨준 데이터들의 묶음이기 때문에, 일반 객체 형태인 {key: "value"} 으로 전달된다.

02. 부모 컴포넌트에서 props 전달

• 1개의 props 전달하기
  문자열은 ""로 전달할 수 있다. 나머지 자료형은 {} 중괄호에 넣어서 전달해야한다.

//부모 컴포넌트 = Profile
export default function Profile() {
	...
  
  return (
  //자식 컴포넌트 = Avatar
    <Avatar name="Kim"/>
  );
}

• 2개 이상의 props 전달하기
  두개 이상의 props를 내보낼 때는 띄어쓰기로 구분하여 작성한다.
  person props는 객체이기 때문에 {{}} 이중괄호로 보내는 것이다.

//부모 컴포넌트 = Profile
export default function Profile() {
	...
  
  return (
  //자식 컴포넌트 = Avatar
    <Avatar
    	person={{ name: 'Kim', id: '1' }}
      	size={230}
    />
  );
}

03. 자식 컴포넌트에서 props 읽기 : 함수형 컴포넌트

• 1개의 props 전달받아 읽기

function Avatar(props) {
  return(
  	<div>
  		<p>안녕하세요, {props.person.name}님</p>
    </div>
}

//구조분해할당 사용
function Avatar({name}) {
  return(
  	<div>
  		<p>안녕하세요, {name}님</p>
    </div>
}

• 2개 이상의 props 전달받아 읽기
  props를 구조분해하여 사용하면 훨씬 간편하게 작성할 수 있다. 또한 props를 받아서 전달할 때, 한번에 전달해야한다면 ... 스프레드 연산자를 사용하여 간결하게 작성할 수 있다.

function Avatar(props) {
  return(
  	<div>
  		<p>안녕하세요, {props.person.name}님</p>
    	<p>구매하신 신발 사이즈는 {props.size}입니다.</p>
    </div>
}

//구조분해할당 사용
function Avatar({ person, size }) {
  return(
  	<div>
  		<p>안녕하세요, {person.name}님</p>
    	<p>구매하신 신발 사이즈는 {size}입니다.</p>
    </div>
}

//스프레드 연산자 사용 (자식의 자식컴포넌트에게 전부 전달하는 경우)
function Avatar(props) {
  return(
  	<div>
  		<Info {...props} /> //👍
        <Info name = {props.person.name} size = {props.size}> //👎
    </div>
}

04. 자식 컴포넌트에서 props 읽기 : 클래스형 컴포넌트
클래스 컴포넌트는 클래스의 메소드 내에서 this.props를 통해 props에 접근한다.

class Avatar extends React.Component {
  render() {
    return <p>안녕하세요, {this.props.name}님</p>;
  }
}

2. props 설정⚙️

01. props의 기본값
props 기본값은 부모 컴포넌트에서 제공되지 않는 props에 대해 기본값을 정의하는 방법이다. props가 누락되었을 때 컴포넌트가 올바르게 동작하도록 한다.

• 함수형 컴포넌트에서 props 기본값 설정하기
  defaultProps 객체를 할당하거나, ES6의 기본 매개변수를 사용한다. 두가지 방법 모두 유효하나, 기본 매개변수를 사용한 방법을 권장한다.

//ES6의 기본 매개변수
function Avatar({name = "Kim"}) {
  return(
  	<div>
  		<p>안녕하세요, {name}님</p>
    </div>
}

//defaultProps 객체 할당
function Avatar({name}) {
  return(
  	<div>
  		<p>안녕하세요, {name}님</p>
    </div>
}

Avatar.defaultProps = {
  name: 'Kim',
};

• 클래스형 컴포넌트에서 props 기본값 설정하기
  defaultProps 객체를 할당한다.

class Avatar extends React.Component {
  render() {
    return <p>안녕하세요, {this.props.name}님</p>;
  }
}

Avatar.defaultProps = {
  name: 'Kim',
};

02. props.children
부모 컴포넌트에서 호출하는 자식 컴포넌트 태그 사이에 전달된 내용(텍스트, React 엘리먼트 등)을 입력하기 위해선 props Children을 사용해야 한다. 즉, 자식 컴포넌트에서 children을 사용하여 부모 컴포넌트 내부에 있는 내용를 표현할 수 있다.

//부모 컴포넌트 = App
function App() {
  return <User>안녕하세요</User>;	//props children으로 데이터 전달
}
----------------------------
//자식 컴포넌트 = User
function User({children}) {
  return <div>{children}</div>;	// 자식 컴포넌트에서 children값 받기
}

props 참고 사이트 1
props 참고 사이트 2