[React] props(Propeties)

부모 컴포넌트에서 내려준 값을 자식 컴포넌트에서 사용하는 것을 의미

 

컴포넌트에서 다른 컴포넌트로 데이터 전달(props 전달)

전달기능(함수)는 부모 컴포넌트에서 구현 부모->자식에게 전달(형제 컴포넌트는 서로 props를 전달할 수 없다)

자식 컴포넌트에서 부모 컴포넌트로 콜백 함수를 사용하여 props를 전달할 수 있음

 

부모 -> 자식에게 전달

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child money={1000}/>
      <!-- money로 props의 속성을 지정 후 값 1000을 할당 -->
    </div>
  );
};

<!-- 자식 -->
import React from 'react';

const Child = (props) => {
          <!-- money -->
  return(
    <div>
      <p>{props.money}</p>
      <!-- props 속성에 접근하기 위해 props.money 사용 -->
    </div>
  );
};

 

 

 

자식 -> 부모에게 전달

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  function Click(money){
    alert(money);
  };
  // 부모에서 함수 구현 
  return(
    <div>
      <Child money={1000} Click={click} />
    </div>
  );
};

<!-- 자식 -->
impore React from 'react';

const Child = (props) => {
  return(
    <div>
      <button onClick={() => {
        props.Click(props.money);
        }};
      >
        값 전달
      </button>
    </div>
  );
};

 

 

 

부모 컴포넌트에서 전달하는 props 값이 없을 때

// 부모
import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child />
    </div>
  );
};

<!-- 자식 -->
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
      <!-- ? 값이 없을경우 -->
    </div>
  );
};

부모 컴포넌트에서 props를 전달하지 않을 경우 기본값을 설정

기본 값은 컴포넌트 밖에, 자식 컴포넌트 안에서 선언해준다

// 자식 컴포넌트
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
    </div>
  );
};
// 기본 값 설정 !
Child.defaultProps = {
  money: 10000
}


// 기본 값의 propTypes 설정
// 설정한 type과 다를 경우 콘솔창에 오류 발생
// import PropTypes from "prop-types"; 해줘야함
// isRequired - 필수 입력

Child.defaultProps = {
  name: PropTypes.string.isRequired,
  children: PropTypes.number
};

++

// 자식 컴포넌트
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.money}</p>
    </div>
  );
};

const Child = (props) => {}
// 요즘에는 이렇게 안하고
const Child = ({ name, color, subject = "먼지" }: Child) => {}
// 이런식으로 많이 사용한다고 함

 

 

사용 예시

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child name="dust" color="black" subject="먼지" />
      <Child name="berry" color="red" subject="빨강" />
      <Child />
    </div>
  );
};

// 
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p style={{ color: props.color }}>{props.name}는 {props.subject}(이)야</p>
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}

 

결과

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child name="dust" color="black" subject="먼지" />
      <Child name="berry" color="red" subject="빨강" />
      <Child />
    </div>
  );
};

// 
import React from 'react';

////////////// 변경된 부분 ////////////////////////
const Child = ({ name, color, subject }) => {
  return(
    <div>
      //////////// props. 를 제외하고 변수명만 적어줌
      <p style={{ color: color }}>{name}는 {subject}(이)야</p>
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}

또는 이런식으로 변경할 수 있다

 

props.children

import React from 'react';
import Child from './Child';

const Parent = () => {
  return(
    <div>
      <Child>먼지</Child>
    </div>
  );
};

// 
import React from 'react';

const Child = (props) => {
  return(
    <div>
      <p>{props.name}는 {props.children}(이)야</p>
      <!-- dust는 먼지야 -->
      <!-- default 값은 밑에서 가져오고 children 값은 태그 내에 있는 값을 가져옴 -->
    </div>
  );
};

Child.defaultProps = {
  name: 'dust'
}

사용 예시

import React from 'react';
import Child from './Child';
import Hello from './Hello';

const Parent = () => {
  return(
    <div>
      <Child>
      	<p>먼지</p>
        <Hello color="pink" />
      </Child>
    </div>
  );
};

<!-- -->
import React from 'react';

const Child = ({ name="dust", children }) => {
  return(
    <div>
      <p>{name}는 {children}</p>
      <!-- 
        dust는 먼지 
        안녕하세요! 
        / 출력 
      -->
    </div>
  );
};

const Hello({ color }) => {
  return <div style={{ color }}> 안녕하세요!(분홍색) </div>
}

 

 

여러개의 props

const Parent = () => {
  const dust = { 
    name: 'dust',
    color: 'black',
    subject: '먼지'
  };
  <!-- const { name, color, subject } = dust; 생략가능 -->
  
  const dust2 = { 
    name: 'dust2',
    color: 'white',
    subject: '먼지2'
  };
  // 이렇게도 쓸 수 있는지? 
  <!-- const { name, color, subject } = dust2; 생략가능 -->
  
  return(
    <div>
      <Child {...dust} />
      // 속성값 전부 불러오기
      <Child {...dust2}/>
    </div>
  );
};

//////////////////////////////////////

const Child = ({ color, name, subject }) => {
  return( 
    <div>
      <p style={{ color }}>{name}는 {subject}(이)야</p>
      <!-- 
        변수명은 달라야하기 때문에 이렇게 사용은 불가능 함 
        한줄에 dust, dust2를 같이 불러오기x
        그렇게 하고 싶을경우 배열로 넘기거나 아니면 변수명이 달라야함
      -->
    </div>
  );
};

Child.defaultProps = {
  name: 'sea',
  color: 'blue',
  subject: '파랑'
}