[노마드코더 - ReactJS로 영화 웹 서비스 만들기] #4 Props

#4.0 Props

ReactJS는 자동으로 컴포넌트에 넣는 모든 property들을 <Btn a="123" b="456"/> 오브젝트로 만든다. {a: "123", b: "456"} 그리고 이 오브젝트는 컴포넌트의 첫번째 인자로 주어지게 된다.

// JSX
<Btn bananna="save Changes" />

// Btn 함수
Btn({banana: "save Changes"})

*component는 JSX를 반환하는 함수다.

#4.1 Memo

props가 바뀌지 않는다면 rerendering하지 않게 만들기 위해서 Memo를 사용한다. 같은 컴포넌트를 사용하는 버튼이 여러개일 수 있다. 첫번째 버튼의 props가 변경되어 rerendering할 때, props가 변경되지 않은 버튼은 rendering하지 않도록 React.memo()를 사용한다.

const MemorizedBtn = React.memo(Btn);
function App() {
    ...
    return (
      <div>
          <MemorizedBtn text={value} onClick={changeValue} />
          <MemorizedBtn text="Continue" />
      </div>
        );
    }

// JSX이기 때문에, onClick은 EventListener가 아니다. 하나의 prop일 뿐이다.
<Btn bananna="save Changes" onClick={changeValue}/>

#4.2 Prop Types

PropType는 어떤 타입의 prop을 받고 있는지를 체크해준다.

// type를 체크해 에러를 발생시킨다.
Btn.propTypes = {
	text: PropTypes.string.isRequired, // .isRequired가 추가된 변수가 없으면 에러를 발생시킨다.
	fontSize: PropTypes.number,
}

#4.3 Recap