[React]03 Properties

Properties

상위컴포넌트(부모)가 하위컴포넌트(자식)에게 값을 전달할 때 사용한다.

아래 예시는 상위컴포넌트인 App에서 하위컴포넌트인 Btn에게 버튼에 표시될 text와 버튼이 눌렸을 때 실행될 handleBtnClick함수를 전달한다. 이때의 onBtnClick 은 prop일뿐 이벤트리스너가 아니다. 자식컴포넌트안의 <button>안에 onClick으로 전달되어야 이벤트리스터이다.

React.memo

App컴포넌트내에서 상태가 변화하게 될 때 브라우저는 UI를 새로 그리게 되는대 이때 컴포넌트내에 코드가 길어지게 되면 랜더링시간이 길어지게 된다.
이때 React.memo는 변화가 일어난 컴포넌트만 새로 그리게 된다.

function Btn(props){ 
        //properties
        //function Btn({text, onBtnClick}) 로 받아올수도 있다.
        console.log(props);
        return (
            <button style={
                {
                    backgroundColor:"tomato",
                    color: "white",
                    padding:"10px 20px",
                    border: 0,
                    borderRadius: 10,
                    margin: "10px",
                }
            }
            onClick = {props.onBtnClick}>{props.text}</button>
        )
    }
    
const MemorizedBtn = React.memo(Btn);

const App =() => {

        
        const [value, setValue] = React.useState("Save changes");
        const handleBtnClick = () => setValue("Revert Changes");
        
        
        return (
            <div>
                <MemorizedBtn text={value} onBtnClick ={handleBtnClick} />
                <MemorizedBtn text="Continue" />
            </div>
        )
    }

propTypes

리액트에서는 prop을 잘못넘겨도 확인할 수 없는 문제점이 존재한다. 이런 문제를 해결하기 위해서 PropTypes라는 모듈의 도움을 받을 수 있는데,
이것은 해당 prop의 type을 미리 지정해주고 전달된 type이 지정된것과 다를경우 warning메세지를 띄워준다.
반드시 전달되어할 prop의 경우 .isRequired를 통해 지정해줄 수 있다.

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

Naming convention

이번에 prop에 대해 알아보면서 prop이름, 함수이름, jsx에서 이미 지정된 이벤트리스터의 이름들이 굉장히 비슷하게 생겨서 무엇이 무엇인지 헷갈렸다.
컨벤션은 개발자들끼리의 규약인데 예를들어 컴포넌트의 첫글자는 대문자로 하자!는 하나의 문법이자 convention이다. 그외에 추가적으로 알아두어야할 것들을 아래에 정리해 보았다.

1. 이벤트핸들러 함수 -> handle_____
2. 이벤트핸들러를 넘기는 prop -> on______
3. Custom Hook -> use___
   단,custom hook안에서는 JSX의 사용을 지양하고 다른 React Hook이나 Javascript로직위주로 작성한다.