[React] React 학습 (4) - Props

Props

Props의 특징

Props의 중요한 특징은 read-only 즉 읽기 전용이라는 것이다.

읽을 수만 있다는 것은 값을 변경할 수 없다는 말이기도 하다.

props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이다.

그런데 이 값들이 엘리먼트를 생성하는 도중에 갑자기 바뀌어 버리면 제대로된 엘리먼트가 생성 될 수 없다.

마치 붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 마찬가지다.

다 구워진 이후에 속재료를 바꾸려면 붕어빵의 배를 갈라야 하는데 그렇게 하면 제대로된 상품으로 판매할 수 없을 것이다.

그렇다면 다른 Props의 값으로 엘리먼트를 생성하려면 어떻게 해야 할까?

그럴 때는 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를  생성하면 된다.

이 과정에서 엘리먼트가 렌더링 되는 것이다.

잠시 자바스크립트 함수의 속성에 대해서 짚고 넘어가 보자.

 

function sum(a, b) {
    return a+b;
}

여기에 sum이라는 이름을 가진 함수가 하나 있다.

이 함수는 a와 b라는 두 개의 파라미터를 받아서 그 둘의 합을 리턴하는 함수다.

이 함수에서는 a와 b라는 파라미터의 값을 변경하지 않고 있다.

그리고 a와 b라는 파라미터 집합의 값이 같은 경우에는 항상 같은 값을 리턴할 것이다.

우리는 이러한 함수를 pure하다 라고 한다.

말 그대로 함수가 순수하다는 뜻인데, 이 말은 입력 값을 변경하지 않으며, 같은 입력 값에 대해서는 항상 같은 출력 값을 리턴한다는 의미다.

그렇다면 함수가 pure하지 않은 경우도 한번 살펴보자.

function withdraw(account, amount) {
     account.total -= amount;
}

여기에 withdraw라는 함수가 있다.

이 함수는 account와 amount라는 파라미터를 받아서 accuint라는 파라미터를 받아서 account의 total이라는 값에서 amount를 빼는 함수다.

쉽게 이야기하면 계좌에서 출금을 하는 함수인데 은행 계좌 정보와 총액을 파라미터 받아서 계좌의 총 잔액을 나타내는 total에서 출금할 금액인 amount를 빼는 것이다.

여기에서 이 함수는 입력으로 받은 파라미터 account의 값을 변경했다.

이런 경우 우리 impure하다 라고하는데, 순수하지 않다라는 뜻이다.

porps에 대해서 설명하다가 갑자기 왜 pure함수와 impure함수에 대해서 설명을 하는지 의아했을것이다.

이것은 리액트 컴포넌트의 정의와 관련이 되어 있기 때문이다.

"All React Components must act like pure functions with respect to their props"

이 문장은 리액트 공식 문서에 나오는 컴포넌트의 특징을 설명한 문장이다.

이 문장을 해석해보면 다음과 같다.

"모든 리액트 컴포넌트는 그들의 props에 관해서는 pure함수 같은 역할을 해야 한다."

이렇게 써놓아도 이해하기 어려우니 쉽게 풀어보자.

모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄것.

앞에서 리액트 컴포넌트가 자바스크립트의 함수와 같은 개념이라고 설명했었다, 그렇기 때문에 리액트 컴포넌트의 입력으로 들어오는 props는 자바스크립트 함수의 파라미터와 같다.

함수가 pure하다는 것은 함수의 입력 값인 파라미터를 바꿀 수 없다는 의미를 포함하고 있기 때문에 리액트 컴포넌트에서는 props를 바꿀 수 없다는 의미가 된다.

그리고 pure 함수는 같은 입력 값에 대해서는 항상 같은 결과를 보보여줘야 하기 때문에 리액트 컴포넌트 관점에서 같은 props 에 대해서 항상 같은 결과를 보여줘야 한다는 의미가 된다.

여기서 결과는 리액트 엘리먼트가 되는것이다.

정리하면 React 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 element를 return해야 한다고 기억하면 된다.

---

Props 사용법

그렇다면 props는 어떻게 사용해야 할까?

앞에서 props가 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체라고 설명했다.

그렇다면 컴포넌트에 props라는 객체를 전달하기 위해서는 어떻게 해야하는지 살펴보도록 하자.

function App(props) {
  return (
    <Profile name="수빡" introduction="안녕하세요, 수빡입니다." viewCount={1500}/>
  )
}

 

먼저 JSX를 사용하는 경우에는 이 코드와 같이 키와 값으로 이루어진 키값상의 형태로 컴포넌트에 props를 넣을 수 있다.

이 코드에는 App 컴포넌트가 나오고 그 안에서 profile 컴포넌트를 사용하고 있다.

여기서 profile 컴포넌트에 name, introduction, viewCount라는 세가지 속성을 넣었다.

여기서 눈여겨봐야 할 부분은 각 속성에 값을 넣을 때 중괄호를 사용한것과 사용하지 않은것의 차이다.

name과 introduction에 들어간 문자열은 중괄호를 사용하지 않았고 viewCount에 들어간 정수는 중괄호를 사용했다.

우리가 앞에서 JSX에 대해서 배울 때 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다라고 배웠다.

그래서 마찬가지로 props에 값을 넣을때에도 문자열 이외에 정수, 변수 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 한다.

물론 문자열도 중괄호로 감싸도 상관은 없다.

이렇게 하면 이 속성의 값들이 모두 프로필 컴포넌트의 props로 전달되며 props는  아래와 같은 형태의 자바스크립트 객체가 된다.

{
  name: "수빡",
  introduction: '안녕하세요, 수빡입니다.',
  viewCount : 1500,  
}

 

그리고 props의 중괄호를 사용해서 다음과 같이 props의 값으로 컴포넌트도 넣을 수 있다.

function App(props) {
  return (
    <Layout
      width={2560}
      height={1440}
      header={
        <Header title="수빡이의 블로그입니다."/>
      }
      footer={
        <Footer />
      }
    />
  )
}

이렇게 하면 레이아웃 컴포넌트의 props로 정수 값을 가진 width, height과 리액트 엘리먼트로 header, footer가 들어오게 된다. 

이처럼 jsx를 사용하는 경우에는 간단하게 컴포넌트에 props를 넣을 수 있다.

그렇다면 jsx를 사용하지 않는 경우에는 어떻게 props를 넣어줘야 할까?

우리가 앞에서 리액트 엘리먼트에 대해서 학습할때 리액트의 createElement 함수에 대해서 배웠다.

React.createElement(
  type,
  [props],
  [...children]
)

createElement함수는 다음과 같은 형태로 사용했었는데, 여기서 두번째 파라미터가 props다.

여기에 자바스크립트 객체를 넣으면 그게 곧 해당 컴포넌트의 props가 되는것이다.

앞에서 나왔던 프로필 컴포넌트를 jsx를 사용하지 않고 코드를 작성하면 다음과 같이 될 것이다.

React.createElement(
  Profile,
  {
    name: "수빡",
    introduction: "안녕하세요, 수빡입니다.",
    viewCount: 1500,
  },
  null
);

type은 컴포넌트의 이름인 Profile이 들어가고 props로 자바스크립트 객체가 들어갔다.

그리고 마지막으로 하위 컴포넌트가 없기 때문에 children에는 null이 들어간다.

앞에서 리액트로 개발할 때는 무조건 jsx를 사용하는 것이 좋다고 설명했었다.

그렇기 때문에 이 코드는 참고만 하고 실제로 props를 사용할 때는 위에 나왔던 jsx를 사용하도록 하자.