react - props 정의 및 사용 방법

 

 

props란?

 

1. properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
2. props는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는데 사용하는 수단( 단방향 데이터 흐름 )

---

 

함수형 컴포넌트 - props 사용방법

 

1. 먼저 부모 컴포넌트(App)에서 자식 컴포넌트(FunctionComponent)로 보낼 props를 작성해준다.

 

 function App() {
 
  return (
    <div className="App">
       {/* 값에 접근할 수 있는 키 값의 네이밍은 원하는 대로 가능하다! */}
      <FunctionComponent name={name} time="2시" />
      <FunctionComponent time="2시" />
      {/* 부모 속성을 자식에게! */}
      {/* 태그 사이에 작성한 글은 자식 컴포넌트에서 children으로 사용가능하다. */}
      <FunctionComponent time="2시">자식 내용</FunctionComponent>
      {/* 중괄호로 감싸서 배열을 전해줄 수 있다. */}
      <FunctionComponent name={[1, 2, 3]} time="14시"></FunctionComponent>
   </div>
  );
 }

 

 

2. 부모 컴포넌트에서 전달해준 데이터를 자식 컴포넌트에서 사용한다.

import { Component } from 'react';

export default function FunctionComponent(props) {
// 파라미터에 props를 작성하여 부모 컴포넌트에서 보낸 데이터를 받아주기
  return (
    <div>
      {/* <h1>Hi {props.name}</h1> */}
      {/* 파라미터 안에 props를 넣어줘야 사용 가능 */}
      <h1>Hi {props.name}</h1>
      <div>{props.children}</div>
    </div>
  );
}

 

 

---

defaultProps 간단 정의, 사용법

 

- 부모 컴포넌트에서 props가 전달되지 않았을 때 기본값으로 보여줄 props를 설정하는 것

- 자식 컴포넌트가 있는 파일에서 코드를 작성하였다.

 

 FunctionComponent.defaultProps = {

   name: '홍길등',

 };

 

 

 

---

 

오늘은 Props의 정의와 사용 방법, props를 default 값으로 주는 방법을 알아보았다.

 

이것 말고도 react에서 Props를 활용하는 방법은 많을 것이라고 생각이 된다. 

 

다음에 기회가 된다면 state와 props의 활용방법에 대하여 포스팅해 볼 생각이다!