[React] Props

이번에 배울 것은 React의 Props인데요 !

Props란, Properties 즉 속성의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. 단방향 데이터 흐름을 가집니다.

props는 state와 다르게 수정할 수 없다는 특징을 가지고 있습니다. 그리고, 문자열을 전달할 때는 큰따옴표 (" ")를, 문자열 외의 값을 전달할 때는 중괄호 ({ })를 사용합니다.

아래는 state글에서 다루었던 증가/감소 프로그램을 props를 이용해 초기값을 설정하는 프로그램입니다.

https://peter-coding.tistory.com/184

[React] state (useState를 이용한)

첫 번째로, App.js입니다.

1. const counterProps = { a:1, b:2, c:3,...}로 counterProps를 정의하고 있고, Counter Component에서 {...counterProps}로 Spread를 이용하여 Props를 전달하고 있습니다. 전달하고자 하는 Props의 타입이 문자열이 아니므로 중괄호({ })를 사용합니다.

2. <div>를 <Container>가 감싸고 있습니다. 이 Container가 무엇인지 먼저 보겠습니다.

import Container from "./Container";
import Counter from "./Counter";

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

  return (
    <Container>
      <div>
        <Counter {...counterProps} />
      </div>
    </Container>
  );
}
export default App;

 

Container Component입니다.

위의 App.js에서 Container에 전달한 props는 바로 <Container>의 자식요소인 <div>입니다.

1. {children}은 <div>를 가리키며, {children}을 <div style={{~}}>로 감싸 스타일을 적용하는 것입니다.

2. 여기서 style = { { margin:20 ... } }로 중괄호로 두 번 감싸야 하는 특이점이 존재합니다.

이렇듯 component를 다른 component의 props로 전달이 가능합니다.

const Container = ({ children }) => {
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid black" }}>
      {children}
    </div>
  );
};

export default Container;

 

세 번째로, Counter Component입니다.

1. App.js의 <Counter {...counterProps}>에서 전달 받은 props를 인수로 받은 것입니다.

여기서 props를 initialValue로 받아, props.intialValue가 아닌 initialValue로 직접사용할 수도 있습니다.

2. OddEventResult 컴포넌트에 count를 props로 넘겨줍니다.

import React, { useState } from "react";
import OddEvenResult from "./OddEvenResult";

const Counter = (props) => {
  const [count, setCount] = useState(props.initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

export default Counter;

 

네 번째 OddEvenResult Component입니다.

1. <oddEventResult count={count}>에서 넘겨준 props인 count를 인수로 전달받아 사용하는 코드입니다.

const OddEvenResult = ({ count }) => {
  console.log(count);
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;