Day 3 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더
강의 : ReactJS로 영화 웹 서비스 만들기
시각 : 2022.04.20


◆ 완료한 강의 :

• #4 [2021 UPDATE] PROPS

1. 객체 인자 Props

부모 함수 컴포넌트에서 자식 컴포넌트 속 자료를 건내받는 법

재활용이 필요할 때 수고를 덜어주는 것.
ex:) 버튼 여러개에 적용할 속성 작성된 함수 컴포넌트 하나 작성해놓고
부모 컴포넌트에서 여러개 버튼 만들고 그 속성 불러와 일괄 적용

객체 인자 'props'

    <Btn banana="Save Changes" />
      <Btn banana="Continue" /> 

Btn이라는 이름의 함수 컴포넌트를 렌더링 한다는 뜻.
여기 렌더링 구문 뒤에 뭔가를 넣으면,
'props'라는 이름의 '객체 argument'가 생성됨.
그것을 함수 컴포넌트의 첫번째 argument(인자)로 보냄.
두번째 argument는 없음.

<혼동 주의!>
뒤에 넣는 것은 객체 argument props에 들어가는 props일 뿐.
ex:) 이벤트 리스너인 onClick을 뒤에 붙여도 props의 이름일 뿐,
이벤트 리스너가 Btn 컴포넌트에 달라 붙는 것은 아님.

함수 컴포넌트에서는 인자 값을 'props'라고 써주어야 함.
function Btn(props) { <== 이렇게
내용에 {props.banana} 이런 식으로 쓰면
props라는 객체 argument에 있는 것들을 꺼내서 써먹을 수 있음

'Shortcut

객체에서 다른 것 필요없이 딱 하나만 꺼내서 적용하면 된다면
function Btn( {banana} ), 그 내용에는 {banana} 이렇게만 해주면 됨.

만약 'Btn banana="Save Changes" big={true} /'
이런 식으로 두개 이상의 속성을 집어 넣었다면
function Btn( {banana, big} ) 이렇게 해줄 수 있음.

그걸 기반으로 fontSize: big ? 18 : 16, 이런 식으로도 가능.
big이 true면 폰트크기 18. 없거나(undefined) false면 폰트크기 16

    function Btn({ banana, big }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 16,
          }}
        >
          {banana}
        </button>
      );
    }

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

2. React.memo()

'Memorize(기억하기)'의 준말.
props에 변동사항이 없다면 재 렌더링 하지 말라는 뜻.
const MemorizedBtn = React.memo(Btn);
이런 식으로 씀.

렌더링 구문을
'MemorizedBtn banana={value} coffee={changeValue} />
'MemorizedBtn banana="Continue" />
이런 식으로 변경해주어야 함.

App 함수 컴포넌트 추가사항

 function Btn({ banana, coffee }) {
      return (
        <button
          onClick={coffee}
          // 클릭 이벤트 리스너를 추가.
          클릭시 아래 변수 'ChangeValue'의 props인 coffee가 실행.
          
          style={{
        .........

    const MemorizedBtn = React.memo(Btn);
    // 'Memo' 기능. 같은 컴포넌트를 여러개 렌더링 하는데,
    props로 인한 변동사항이 없다면 렌더링을 하지 말라는 것.
    아래 banana="Continue"인 애는 변동사항이 아예 없으므로
    재 렌더링 되지 않게 됨

    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      // 기본 값은 'Save Changes'. 변수 changeValue로 무언가를 하면
      값이 문자열 'Revert Changes'로 바뀜.
      
      return (
        <div>
          <MemorizedBtn banana={value} coffee={changeValue} />
          <MemorizedBtn banana="Continue" />
        </div>
      );

3. PropTypes

'script src='에 "https://unpkg.com/prop-types@15.7.2/prop-types.js" 등록

우리가 삽입한 props에 정의를 내리고, 검사를 가능케 해줌.
ex:) Btn.propTypes = {
banana: PropTypes.string.isRequired, }
fontSize: PropTypes.number
banana란 prop는 문자열만 반드시 들어가야 한다.
fontSize란 prop은 숫자를 넣어야 한다