CoxeMonkey

보통 처음에 state를 배우고 나면 props 개념을 배우게 됩니다.

props는 보통 상단 componet에서 하단 component에게 이름을 붙여 값을 전달하는 방식이며

여러 데이터를 넘길수 있습니다.

Props를 사용하는 이유는 상단 컴포넌트에서 하단 컴포넌트에게 데이터를 이동시켜주기 위함입니다.

App.js

import React from "react";

import MyHeader from "./components/MyHeader";
import Counter from "./components/Counter";

function App() {
  return (
  	<div className="app">
    	<Counter initialValue={5} />
    </div>
  );
}

export default App;

Counter.js

import React, { useState } from "react";

const Counter = (props) => {
  console.log(props); // { initialValue: 5 }
};

export default Counter;

props 는 매개변수로 받아오며 console.log를 찍어보면 initialValue를 가진 object를 받아오게 됩니다, 그래서

App.js

import React from "react";

import MyHeader from "./components/MyHeader";
import Counter from "./components/Counter";

function App() {
  return (
  	<div className="app">
    	<Counter a={1} b={2} initialValue={5} />
    </div>
  );
}

export default App;

a={1} b={2} initalValue={5} 이러한 형태로 데이터를 넘겨준다면 

Counter.js

import React, { useState } from "react";

const Counter = (props) => {
  console.log(props); // { a: 1, b: 2, c: 3, initialValue: 5 }
};

export default Counter;

Counter Component에서는 a, b, initialValue를 가지고 있는 object 데이터를 받게 됩니다.

{ a: 1, b: 2, initialValue: 5 }

App.js

import React from "react";

import Counter from "./components/Counter";

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    initialValue: 5,
  };

  return (
    <div className="app">
      <Counter {...counterProps} />
    </div>
  );
}

export default App;

만약 데이터 넘기는 양이 많아진다면 Spread Operator (스프레드 연산자)를 사용할 수도 있습니다.

Spread Operator (스프레드 연산자)는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용됩니다.

Counter.js

import React, { useState } from "react";

const Counter = (props) => {
  console.log(props); // { a: 1, b: 2, c: 3, initialValue: 5 }
};

export default Counter;

console을 찍어보게 되면 바로 전 코드와 같이 직접 대입하는 방식과 같은 결과가 나오게 됩니다.

만약 props에서 [ a, initialValue ]만 뽑아오고 싶다면 어떻게 하면 가져올 수 있을까요?

바로 ES6(2015)에 추가된 Destructuring Assignment (비 구조화 할당)을 사용하면 됩니다.

Counter.js

import React, { useState } from "react";

const Counter = ({a, initialValue}) => {
  console.log(a);            // 1
  console.log(initialValue); // 5
};

export default Counter;

Destructuring Assignment(비 구조화 할당)로 받은 데이터를 확인해보면 데이터가 잘 넘어온 것을 확인할 수 있습니다.

만약 props에 undefined가 들어있다면 문제가 발생하는데 그것을 해결하는 걸 해보도록 할게요.

App.js

import React from "react";

import Counter from "./components/Counter";

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <div className="app">
      <Counter {...counterProps} />
    </div>
  );
}

export default App;

이런 식으로 counterProps에서 initialValue를 지우고 데이터를 넘겨준다면

Counter.js

import React, { useState } from "react";

const Counter = ({a, initialValue}) => {
  console.log(initialValue); // undefined
};

export default Counter;

이런 식으로 undefiend 가 뜨게 됩니다, 이런것을 방지하기 위해 defaultProps라는것이 있는데

Counter.js

import React, { useState } from "react";

const Counter = ({ initialValue }) => {
  console.log(initialValue); // 0
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

이런식으로 defaultProps를 지정하게 되면 props를 받아올 때 만약 데이터가 없다면 0으로 초기화를 시켜줄 수 있습니다.

이상으로 props에 대한 이야기를 해보았습니다.

아직 많이 부족하지만 공부 한것을 정리할겸 포스팅 해보았습니다.

만약 부족하거나 잘못된 점을 말씀해주시면 바로바로 수정하겠습니다.

감사합니당.