props 사용법

Wonju·2022년 1월 7일

props 는 속성 이라고 볼 수 있다.

버튼 2개에 같은 스타일을 주고싶은데,

 function SaveBtn() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
          }}
        >
          Save Changes
        </button>

 function Continue() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
          }}
        >
          Continue
        </button>

이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다.
저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다.

그래서 아예 Btn 이라는 컴포넌트를 만들어주고,
<Btn/>컴포넌트 2개를 App 컴포넌트 안에 넣어준다.

 function Btn() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
          }}
        >
          Save Changes
        </button>
      );
    }

하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다.

<img src=""> 하듯이 새로운 정보를 Btn 컴포넌트에 전송해줄 수 있다.

// text든 banana든 이름은 아무렇게 작성해도 상관없다.
	  <컴포넌트 이름 + 키값 = "값"
          <Btn banana="Save Changes" />
          <Btn banana="Continue" />

하지만 아직 변화는 없다.

왜냐하면 아직 Btn컴포넌트는 "banana" 라는 키값을 전달받지 않았기 때문이다.

알아야 할 건,

모든 컴포넌트는 "()" 괄호로 파라미터를 받는다는 것.
이름은 보통

prop

라 한다.

Btn으로부터 전달받는 properties 인 것.

        <div>
          <Btn banana="Save Changes" />
          <Btn banana="Continue" />
     
            위의 두 컴포넌트의 의미는
            
           Btn({banana: "Save Changes"}) 
     	   Btn({banana: "Save Changes"})
	    와 같다.
        
     Btn함수를 불러와 banana 라는 인자를 보내는 것과 같은 의미.
        </div>

function Btn(props) {
      console.log(props);
      return (

        ...
        ...
    }
        
 function App() {
      return (
        <div>
          <Btn banana="Save Changes" />
          <Btn banana="Continue" />
        </div>
      );
    }

위 코드를 토대로 콘솔창을 보면

이렇게 각 Btn의 props는 우리가 넣은 것들을 모두 가진 Object 형태로 나타나는 것을 볼 수 있다.

props 사용법 2가지

1.

    function Btn(props) {
      console.log(props);
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
          }}
        >
          {props.banana}
        </button>
      );
    }

    function App() {
      return (
        <div>
        // 작명은 아무렇게나 가능
          <Btn banana="Save Changes" />
          <Btn banana="Continue" />
        </div>
      );
    }

부모 컴포넌트에 자식 컴포넌트를 원하는 위치에 넣고, 키값을 지정해주고,
자식 컴포넌트(Btn)의 인자에 "props"를 해주고,
자식 컴포넌트에서 인자가 전달되기를 원하는 곳에
"{props.인자}" 를 작성해준다.

2. 더욱 간단하게 사용하는 법

// props 는 Object 이기 때문에 중괄호로 감싸준다.
// 그리고 Object로부터 banana를 받는다.
// 즉 property(여기선 banana)를 Object로부터 꺼내오는 것
 function Btn({ banana }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
          }}
        >
          // props 써줄필요없이 그냥 banana만 작성
          {banana}
        </button>
      );
    }

2가지 방법 모두 잘 작동한다.

아래와 같이 props는 여러개도 사용해줄 수 있다.
인자 자리, 그리고 컴포넌트에 정보 입력하는 부분에 추가해주면 된다.

  function Btn({ banana, text }) {
      return (
        console.log(banana, text)
        // Save Changes big 출력
        // Continue undefined 출력
        
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
            fontSize: text ? 18 : 16,
        // 🟡위와 같이 props를 활용해 조건문을 사용할 수도 있다.
          }}
        >
          {banana}
        </button>
      );
    }

    function App() {
      // React에서는 for 사용불가능. class대신 className쓰듯

      return (
        <div>
          <Btn banana="Save Changes" text="big" />
          <Btn banana="Continue" />
        </div>
      );
    }