React | nomadcoders 2/n

#4.0 Props

App은 부모 컴포넌트, 나머지는 자식 컴포넌트.
Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 하는 방법이다.

같은 스타일의 버튼을 만들 때, 복사 붙여넣기가 아니라 컴포넌트를 재사용하기.

무엇이든 App에서 값을 보내면 자식 컴포넌트의 첫번째 인자(props)로 들어간다. 두번째 인자 같은 건 없음.
props는 이 모든 값을 저장하는 하나의 Object기 때문에, props.이름 으로 사용하면 된다.
원한다면 컴포넌트의 ()부분에 {프롭스이름}으로 적으면, props.이름으로 쓸 필요 없이 바로 이름으로 받을 수 있다....

예시

function Btn({banana, big}){
  return(
    ...
    {banana}
    
    {apple}
  )

빨강, 초록 버튼 컴포넌트를 만들어 사용한 예시

import './App.css';

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

function GreenBtn(props){
  return <button style={{
    backgroundColor: "green",
    color: "white",
    padding: "10px 20px",
    borderRadius: 10,
    border: 0,
    cursor: "pointer"
  }}>{props.text}</button>;
}

function App() {
  return (
    <>
      <RedBtn text="Save Changes" big={true} />
      <GreenBtn text="Confirm" />
    </>
  );
}

export default App;

#4.1 Memo

📌 주의
onClick을 커스텀(내가 만든) 컴포넌트에 넣는다면 그건 props 이름이 onClick인 것일 뿐이고, HTML 태그에 넣는다면 그건 이벤트 리스너가 된다. 이벤트 리스너를 위해서 반드시 HTML 태그에 넣어야 한다.

state를 이용해 값을 바꾸면 App의 return 구문 전체가 re-rendering된다.

그럼 원하는 부분만 re-render하려면 어떻게 해야 할까?

우리는 props가 변경되지 않는 한 이 컴포넌트가 re-render되는 것을 원치 않는다고 memo할 수 있다.

=> React Memo의 사용.

아래와 같이 코드를 작성하면, 버튼 클릭시
<MemorizedBtn text={value} changeValue={changeValue}/>는 다시 렌더링되고
<MemorizedBtn text="Continue" />부분은 다시 렌더링되지 않는다.

import React, { useState } from 'react';
import './App.css';

function Btn(props){
  return (
    <button 
      onClick={props.changeValue}
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0,
        cursor: "pointer",
    }}>{props.text}</button>
  )
  
}

const MemorizedBtn = React.memo(Btn)
function App() {
  const [value, setValue] = useState("Save Changes");
  const changeValue = () => setValue("Revert Changes");
  return (
    <>
      <MemorizedBtn text={value} changeValue={changeValue}/>
      <MemorizedBtn text="Continue" />
    </>
  );
}

export default App;

#4.2 Prop Types

PropTypes 패키지를 사용하면 받고 싶은 props의 타입을 지정해 줄 수 있다.

그럼 타입을 잘못 입력했을 때 이렇게 warning 메시지를 볼 수 있다. 코드 자체는 유효하기 때문에 에러 메시지를 볼 수 없지만, 우리가 실수를 했다고 알려줄 수 있도록 설정할 수 있는 것이다.

• 인자를 전달해 줄 때 기본값을 주고 시작할 수 있다.

• 반드시 이 props값을 갖고 실행되는 것이 확실하다면 .isRequired를 붙여줄 수 있다.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './App.css';

function Btn({text, fontSize = 12}){
  return (
    <button 
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0,
        cursor: "pointer",
        fontSize: fontSize
    }}>{text}</button>
  )
  
}
Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number.isRequired
}
function App() {
  return (
    <>
      <Btn text="Save Changes" fontSize={"hey"} />
    </>
  );
}

export default App;

그밖에도 다양한 옵션들을 실험해볼 수 있음.