PROPS

부모 컴포넌트에 자식 컴포넌트를 보낼수 있는 방법

function Btn(props)

⇒ 함수에는 argument를 불러올 수 있다.

<Btn banana ="Save Changes"/>

Btn 함수를불러서 banana라는 인자를 받는것과 같다.

Memo

<Btn text = {value} onClick={changeValue}/>
<Btn text = "Continue"/>

⇒ 각각의 Btn의 내용들은 prop이 된다

• 첫번째 버튼 클릭 → Btn 컴포넌트로 들어가는 것, onClick의 경우, Btn 함수에서 지정해야 Event Listener가 될 수 있다.
• Prop를 사용하기 위해서는 사용하고자 하는 내용들을 Btn{}로 받아주는 과정이 필요하다.

Memo

컴포넌트가 다시 그려지기를 원치 않을 때 사용할 수 있다.

const MemorizeBtn = React.memo(Btn)

⇒ 해당 문법을 사용하여 상태를 기억해서 다시 렌더링 하는것을 방지할 수 있게 된다.

Prop Types

<Btn text = "Save Changes" fontSize={18}/>
<Btn text = {14} fontSize={"continue"}/>

텍스트를 보내는 곳에 숫자를 보낼수도, 숫자를 보내야 하는곳에 문자열을 보내는 실수를 할 수 있다.

• React에서 PropTypes를 이용하여 어떤 Type의 prop를 받는지 체크할 수 있다.

Btn.propTypes = {
      text:propTypes.string,
      fontSize:propTypes.number,
    }

해당 방식으로 알려주는 것이 가능하다

Btn({text, fontSize = 12})

위와 같이 설정하게 되면, fontSize가 전달되지 않을때의 기본값을 전달할 수 있다.

Reference

해당 챕터 내용을 정리한 Git
https://github.com/inpyu/React-Practice/issues/3

원본 강좌 링크
https://nomadcoders.co/react-for-beginners/lobby