props

state에 이어서 props에 대해 정리해볼까 한다!

예를 들어 애플리케이션에서 여러개의 버튼을 사용한다고 가정해보자.
버튼의 디자인을 동일하게 통일시키는 것이 사용자가 보기에 깔끔하고 좋을 것이다.
그럼 버튼에 style을 지정 해주어야하는데 props를 사용하지 않은 코드를 먼저 봐보자.

props를 사용하지 않은 button style

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

이런 식으로 props를 사용하지 않으면 각 버튼마다 style을 지정해주어야한다.
이러면 코드가 지저분해보이고 쓸데없이 길어져버린다.
이걸 개선하기 위해 props를 사용하면 되는데 다음 코드를 봐보자.

props를 사용한 button style

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

똑같은 코드인데 코드의 양이 확연하게 줄어든 것을 볼 수 있다!
App()에서 Btn이라는 동일한 컴포넌트를 두번 호출하고 text라는 props를 지정해준다.
그리고 props를 첫번째 인자로 받고 {props.text}를 적어주면

다음과 같이 나타나게 된다!
컴포넌트를 여러개 만들 필요없이 하나의 컴포넌트를 props를 이용해 여러번 재사용할 수 있다는 것이 props의 핵심이다.

조금 더 응용해보자면 props는 여러개 지정할 수 있다.

    function Btn({ text, big }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            fontSize: big ? 20 : 16,
          }}
        >
          {text}
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn text="Save Changes" big={true} />
          <Btn text="Continue" big={false} />
        </div>
      );
    }

Btn에 text와 big이라는 두개의 props를 전달하고
big이 true이면 fontSize를 20으로, false이면 16으로 설정할 수 있다.

실행하면 다음과 같이 나온다.

또 중요한 것!

function Btn({ text, onClick }) {
      return (
        <button
          onClick={onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
          }}
        >
          {text}
        </button>
      );
    }
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text="Save Changes" onClick={changeValue} />
          <Btn text="Continue" />
        </div>
      );
    }

밑에서 5번째줄에 있는 onClick={changeValue} 는 이벤트 리스너가 아니다. 저건 Btn이라는 컴포넌트를 호출하는 곳에 썼기 때문에 단지 onClick이라는 이름의 props인 것이다.
만약 onClick이벤트리스너에 changeValue를 적용시키고 싶다면 위에 Btn함수에 onClick이라는 props를 받아와 button html안에서 onClick={onClick} 을 사용해야한다.
헷갈리지 않게 유의하자 !

React는 정말 간편하다. 지금까지 배운 언어중에 ReactJS가 제일 흥미로운 것 같다!
열심히 빨리 완강해야지