[React] Props

🅿️ Props

 Props의 개념을 배울 때 당시 정리해둔 내용은 "컴포넌트 확장 방식이며, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 방법" 으로 한 줄 정리해두었다. 이를 Java와 엮어서 생각했을 때, 가장 먼저 떠오른 개념은 메소드 파라미터이다. 사실, Java 뿐만 아니라 대부분의 프로그래밍에서는 파라미터라는 개념을 사용할 것이다. 이를 리액트에서는 왜 따로 Props로 정리한지는 모른다. 다만, 자바의 메소드 파라미터와 가장 큰 차이점이 있다면 "함수 자체를 전달받을 수 있다"는 내용일 것이다.

 자바의 경우, 메소드 파라미터에 들어갈 수 있는 정보들이 int, String, array와 같은 데이터 형태거나, 클래스의 형태를 전달받아 사용하게 된다. 데이터 형태의 경우 직접 사용하는 경우가 많고, 클래스의 경우 객체를 생성하여 사용하거나, 생성된 객체의 메소드를 호출하여 사용하게 되어있다. 물론, 자바가 람다식을 지원한 이후로 메소드의 리턴값에 함수 형태의 정의가 사용될 수 있기는 하다. 그렇지만 여전히 메소드 파라미터에 특정 "메소드"가 넘겨져 사용되는 경우는 없다.
 리액트의 경우, 신기하게도 함수 자체를 Prop으로 넘긴다. 해당 함수를 전달받은 함수나 컴포넌트는 그 함수를 그~~대로 쓰면 된다. 객체 생성, 메소드 호출과 같은 과정을 거치지 않고 그냥 함수를 실행시키는 개념이다. 이것은 자바스크립트 언어의 특징으로 인해 가능한 내용이다. 이 개념이 아마도 "일급객체" 일 것이다. (궁금하시면 검색 해보시는 것을 권장드린다.) 개인적으로는 아직 어마어마한 차이라고 느껴지진 않기는 하지만, 아마도 계속 사용하다보면 체감이 될 만한 부분일 것 같아서 매우 신기했다.

⌨️ 어떻게 쓰는데?

 Props를 사용하는 예제 코드를 하나 가져왔다. React 관련 예제 코드는 모두 유튜버 노마드코더의 리액트 무료강의 클론 코딩 예제이다. 아래 예제 코드를 보면, Btn이라는 함수에 onClick이라는 함수가 넘어올 수 있게 선언되어 있고, 그 함수를 그대로 명시해주기만 하면 해당 함수가 동작하게 된다. 그러나, onClick이라는 함수는 아래 코드에는 없다. 그 이유는 해당 코드에는 없지만, 타 컴포넌트를 import 해와서, 해당 컴포넌트에 있는 함수를 불러왔기 때문이다.

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

 

또한, propTypes를 통해 정의된 함수에 들어올 props의 데이터 형태 등을 미리 정의해둘 수 있기도 하다.

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>
        <Link to={`/movie/${id}`}>{title}</Link>
      </h2>
      <p>{summary > 235 ? `${summary.slice(0, 235)}...` : summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

Movie.propTypes = { // props를 정의해두는 부분
  id: PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

 

리액트는 이런 기능도 있구나 하는 경험을 했던 시간이었다.