[nomadcoder]ReactJS로 영화 웹 서비스 만들기 #4 [2021 UPDATE] PROPS

Prop

Prop 은 component 에 보내지는 인자(argument)이다.

1. props에 function도 보낼 수 있음
   이것은 JSX로 html 태그 자체에 이벤트 리스너를 넣는것과는 전혀 다른 것임.
   그저 이벤트를 실행시키는 함수가 프로퍼티로 들어간 것임.
   prop은 그냥 부모에서 자식으로 데이터를 넘길 때 사용하는 argument의 역할이니까!

2. 부모의 상태를 바꾸는 함수를 만들었고, 부모 컴포넌트에서 그 함수를 prop으로 보내면 자식 컴포넌트에서 그 함수가 실행된다.

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

* React.memo()

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

const MyComponent = React.memo(function MyComponent(props) {
/* props를 사용하여 렌더링 */
});

https://ko.reactjs.org/docs/react-api.html#reactmemo

예시-버튼 2개 같은 디자인 적용시키기

    <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({banana, onClick}) {
            console.log(banana, " was rendered")
            return(
                <button
                    onClick={onClick}
                    style={{
                        backgroundColor : "tomato",
                        color: "white",
                        padding: "10px 20px",
                        border: 0,
                        borderRadius: 10,

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

        ReactDOM.render(<App/>, root);
    </script>

PropTypes

1. 리액트는 파라미터를 잘 못 넘겨도 확인할 수 없는 문제점이 존재한다.
2. 이런 문제를 줄이기 위해서 PropTypes라는 모듈의 도움을 받을 수 있다.
3. type과 다르게 입력 되엇을 경우 warning을 뜨게 할수 있고, parameter 에 값을 넣지 않는 경우 경고 메시지를 띄울수 있다.

        //prop의 형식을 잘 못 넣었을 때 에러를 보여줌
        Btn.propTypes = {
            text: PropTypes.string.isRequired, 
            fontSize: PropTypes.number,
        };