[React] Props

<script src='...prop-types'></script>

<script>
	const Btn = ({ text, fontSize = 12 }) => (
    	<button style={{fontSize: fontSize}}>
        	{ text }
        </button>
    )
    
    const MemorizedBtn = React.memo(Btn)

    MemorizedBtn.propTypes = {
        text: PropTypes.string.required,
        fontSize: PropTypes.number
    }

    const App = () => (
        <div>
            <!-- before <Btn /> -->
            <MemorizedBtn text="save" onClick={() => {}} />
            <MemorizedBtn text="revert" fontSize={14} />
        </div>
    )
</script>

 

Props

- props로 function 전달 가능 (JSX)

HTML 태그의 이벤트 리스너와는 별개의 다른 것.

이벤트시 실행될 함수가 프로퍼티로 들어간 것임.

// 방법1. 추천
const Component = ({ name, key }) => (
    <div>
    	{ name } { key }
    </div>
)

// 방법2. 비추천
const Component = (props) => (
    <div>
    	{ props.name } { props.key }
    </div>
)

 

Memo

부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남. 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo(component)로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음. 아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 될듯.

 

React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

const NewComp = React.memo(Component)

const App = () => (
    <div>
        <NewComp name={} />
        <NewComp key={} />
        <NewComp name={} key={} />
    </div>
)

 

Prop Types

*패키지 설치

 

props의 type과 required 여부를 지정해 줄 수 있다!

속성이 필수값이 아니고 type만 지정됐을 경우, 전달하지 않아도 에러나지 않는다

Component.propTypes = {
	prop1: PropTypes.string.required,
	prop2: PropTypes.number
}

 

TS를 사용할 경우, 이 패키지는 필요 없다 ><