[React] Props (Properties)

---

 

#1. Props

1. Props의 개념

1) Props란?

• Props는 Properties(프로퍼티)의 줄임말이다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단반향 데이터 흐름을 갖는다.)
• 프로퍼티는 수정할 수 없다는 특징이 있다. (자식 입장에서는 읽기 전용인 데이터)
• 프로퍼티에 문자열을 전달할 때는 따옴표(" ")를 사용하고, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용한다.
  
  • 컴포넌트를 사용하는 부모로 부터 전달 받는 변수값이 포함되어 있는 객체이다.
  • 컴포넌트에게 HTML 속성 같은 형태로 전달된다.

 

2) 컴포넌트 종류

-1. 클래스 컴포넌트

• React의 오리지널 컴포넌트이다. 함수형태로 정의하는것이 아닌 클래스 형태로 정의 한다.
• 함수형 컴포넌트 보다 구문이 복잡하고 길다.
• 함수형 컴포넌트 보다 구문이 좀 더 명확하다.
• 클래스 안에 LifeCycle 이라는 미리 정해진 함수들을 통해 화면의 갱신 시점이나 변수값의 변경 시점에 화면을 어떻게 처리할지 정의할 수 있다.

class Example extends React.Component {
  render() {
    return <h1>예시입니다. {this.props.name}</h1>;
  }
}

 

-2. 함수형 컴포넌트

• 클래스 컴포넌트 보다 구문이 간결하지만, 그만큼 더 난해해 질수 있다.
• 리액트 버전 16 이후에 LifeCycle을 처리할 수 있는 hook이라는 기능이 도입되면서 리액트에서 공식적으로 권장하는 컴포넌트 작성 방법이다.

const Example = (props) => {
  return <h1>예시입니다. {props.name}</h1>;
}

 

2. Props 사용하기

1) 프로퍼티 넘기기

- App.js

import React from "react";
import MyPropsSub from './components/MyPropsSub';  // MyPropsSub.js 참조

function App() {
  return (
    <div>
    
      <MyPropsSub menu="곱창" date="1" />
      <MyPropsSub menu="육회" date={2} />  // 문자열을 넘겨줄 때는 " "를 사용하고 그 외는 { }를 사용한다.
      
    </div>
  );
}

export default App;

• App.js 컴포넌트에서 MyPropsSub.js 컴포넌트에 menu 와 date 값을 지정하여 프로퍼티로 넘겨준다.
• 문자열을 넘겨줄 때는 " "를 사용하고 그 외는 { }를 사용한다.

 

- MyPropsSub.js (예시)

import React from "react";

const MyPropsSub = (props) => {
  return (
    <div>
    
      오늘 "{props.menu}" 땡긴다ㅠ 다이어트 {props.date}일 차..
      
    </div>
  );
};

export default MyPropsSub;

• props라는 매개변수로 App.js에서 프로퍼티 값을 받고, 객체 처럼 사용할 수 있다.

 

※ 출력결과

 

2) 비구조 문법 활용하기

• 비구조 문법을 통해 변수 속성값을 변수로 선언해서 사용할 수 있다.
• 처음부터 매개변수에 프로퍼티를 선언하는 방법이다.

- App.js

import React from "react";
import MyPropsSub from './components/MyPropsSub';  // MyPropsSub.js 참조

function App() {
  return (
    <div>

      <MyPropsSub menu="참치회" date="10" />
      <MyPropsSub menu="야채곱창" date={20} />
      
    </div>
  );
}

export default App;

 

- MyPropsSub.js (예시)

import React from "react";

const MyPropsSub = ({menu, date}) => {

  return (
    <div>
    
      오늘 "{menu}" 땡긴다ㅠ 다이어트 {date}일 차..

    </div>
  );
};

export default MyPropsSub;

• App.js로 부터 넘겨받는 프로퍼티를 매개변수에 바로 선언한다.

 

※ 출력결과

 

3) 기본값 설정

• defaultProps 를 사용하여 속성값이 전달되지 않을 경우를 대비해서 기본값을 JSON으로 정의해 둘 수 있다.
• 또는 컴포넌트에 props 기본값을 설정하고 싶은 경우 사용한다.

- App.js

import React from "react";
import MyPropsSub from './components/MyPropsSub';  // MyPropsSub.js 참조

function App() {
  return (
    <div>

      <MyPropsSub />  // 호출만 하고 프로퍼티 값은 지정하지 않았다.
      
    </div>
  );
}

export default App;

• MyPropsSub 를 호출만 하고 안에 프로퍼티 값은 지정하지 않았다.

 

- MyPropsSub.js (예시)

import React from "react";

const MyPropsSub = ({menu, date}) => {

  return (
    <div>
      오늘 "{menu}" 땡긴다ㅠ 다이어트 {date}일 차..
    </div>
  );
};

export default MyPropsSub;

// 기본값 설정
MyPropsSub.defaultProps = {
  menu: "아무거나",
  date: 7
};

• defaultProps 를 사용하여 기본값을 설정한다.

 

※ 출력결과

 

4) 데이터 타입과 필수 값 설정

• 컴포넌트로 전달되는 props 값들에 대한 데이터 타입과 필수 여부를 지정할 수 있다.
• 기본값 설정을 하지 않는 경우 해당 프로퍼티를 필수 프로퍼티로 선언 할 수 있다.
• 규칙에 맞지 않는 props 값에 대해 브라우저 개발자 콘솔에 warning 메세지가 출력된다.

 

import PropTypes from "prop-types";

• 데이터 타입과 필수 값을 설정하기 위해서 prop-types를 import 해야한다.

- MyPropsSub.js (예시)

import React from "react";
import PropTypes from "prop-types";

const MyPropsSub = ({menu, date}) => {

  return (
    <div>
      오늘 "{menu}" 땡긴다ㅠ 다이어트 {date}일 차..
    </div>
  );
};

// 데이터 타입과 필수값 설정
MyPropsSub.propTypes = {

  // menu 속성의 데이터 타입을 문자열 지정
  menu: PropTypes.string,
  
  // date의 데이터 타입을 숫자형으로 지정, 필수 여부 지정
  //-> 필수 여부 설정은 데이터 타입 뒤에 ".isRequired" 를 추가 명시
  date: PropTypes.number.isRequired,

};

export default MyPropsSub;

• menu 속성은 데이터 타입을 문자형, date 속성은 숫자형으로 지정
• 필수 여부는 데이터 타입 뒤에 .isRequired 를 추가로 명시하면 된다.

 

- App.js

function App() {
  return (
    <div>
      <MyPropsSub menu="참치회" date="10" />
    </div>
  );
}

• date 속성의 데이터 타입은 숫자형인데 문자열로 값을 지정

 

※ 출력결과

• 정상적으로 출력은 되지만 경고 메세지가 뜨는걸 볼 수 있다.

 

3. Props 활용하기

• 아래 JSON 형식의 데이터를 받아 표를 완성한다.

- GradeData.js (예시)

const GradeData = [
  {"이름": "철수", "학년": 1, "성별": "남자", "국어": 98, "영어": 78, "수학": 88, "과학": 64 },
  {"이름": "영희", "학년": 2, "성별": "여자", "국어": 88, "수학": 62, "과학": 72 },
  {"이름": "민수", "학년": 1, "성별": "남자", "국어": 92, "영어": 70, "수학": 76, "과학": 78 },
  {"이름": "수현", "학년": 3, "성별": "여자", "국어": 63, "영어": 60, "수학": 31 },
  {"이름": "호영", "학년": 4, "성별": "남자", "국어": 88, "영어": 50, "과학": 88 },
];

export default GradeData;

 

- App.js

import React from "react";
import GradeData from "./GradeData";  // GradeData.js 참조
import GradeItem from "./components/GradeItem";  // GradeItem.js 참조


function App() {
  return (
    <div>
      <h1>성적표</h1>
      <hr />
      <table border="1" >  // 테이블 생성
        <thead>
          <tr>
            <th>이름</th>
            <th>학년</th>
            <th>성별</th>
            <th>국어</th>
            <th>영어</th>
            <th>수학</th>
            <th>과학</th>
            <th>총점</th>
            <th>평균</th>
          </tr>
        </thead>
        <tbody align="center">
        
          {/* GradeData의 객체를 map을 활용하여 반복한다 */}
          {GradeData.map((v,i) => {
            return (
              <GradeItem key={i}
              name={v.이름}
              level={v.학년}
              gender={v.성별}
              kor={v.국어}
              eng={v.영어}
              math={v.수학}
              sci={v.과학} />
            )
          })}
        </tbody>
      </table>
    </div>
  );
}

export default App;

• GradeData.js를 참조하고, map( ) 함수를 활용하여 반복해서 props 값을 GradeItem.js에 넘겨준다.

 

- GradeItem.js (예시)

import React from "react";
import PropTypes from "prop-types";  // 데이터타입 지정과 필수값 설정을 위한 참조

// 비구조문법으로 프로퍼티 값을 호출한다.
const GradeItem = ({name, level, gender, kor, eng, math, sci}) => {
  
  // 점수 합계를 구한다
  const sum = parseInt(kor + eng + math + sci);
  // 점수의 평균을 구한다
  const avg = parseInt(sum / 4);

  // 프로퍼티를 변수로 사용
  return (
    <tr>
      <td>{name}</td>
      <td>{level}</td>
      <td>{gender}</td>
      <td>{kor}</td>
      <td>{eng}</td>
      <td>{math}</td>
      <td>{sci}</td>
      <td>{sum}</td>
      <td>{avg}</td>
    </tr>
  );
};

// 데이터 타입 지정
GradeItem.propTypes = {
  name: PropTypes.string.isRequired,
  level: PropTypes.number.isRequired,
  gender: PropTypes.string.isRequired,
  kor: PropTypes.number,
  eng: PropTypes.number,
  math: PropTypes.number,
  sci: PropTypes.number,
};

// 기본값 지정
GradeItem.defaultProps = {
  kor: 0,
  eng: 0,
  math: 0,
  sci: 0
};

export default GradeItem;

• 비구조문법으로 App.js 에서 받은 props를 선언하고, 변수로써 사용한다.
• 데이터가 없는 과목은 기본값을 0점으로 지정한다.

 

※ 출력결과