[React JS] Memo

React JS에서 HTML요소에 들어가는 onClick과 같은 이벤트 리스너가 커스텀 컴포넌트에서는 이벤트 리스너가 아닌 onClick라는 이름을 가진 Prop을 전달한 것 뿐이다.

        const Btn = ({text}) => {
            return(  
            <button onClcick={여기서의 onClcik은 이벤트 리스너이고}
             style={{
                 backgroundColor: "tomato",
                 color:"white",
                 padding:"10px 20px",
                 borderRadius:10,
                 border: 0,
             }}
            >{text}</button>
        )};
        
       const App = () => {
            const [value, setValue] = React.useState("Save changes");
            const changeValue = () => setValue("Revert changes");
            return (
                <div>
                    <Btn text={} onClcik={이곳에서의 onClick은 prop이다}/>
                    <Btn text="Continue" />
                </div>
            );
        };

마찬가지로 커스텀 컴포넌트에는 style 같은 서식도 적용되지 않고 하나의 prop으로 받아들인다.

 

따라서 커스텀 컴포넌트에 이벤트를 넣고 싶다면 해당 자식 컴포넌트에 prop을 보내주고 커스텀 컴포넌트 내 해당 이벤트의 함수를 만들어 주면 된다.

        const Btn = ({text, changeValue}) => {
            return(  
            <button
             onClick={changeValue}
             style={{
                 backgroundColor: "tomato",
                 color:"white",
                 padding:"10px 20px",
                 borderRadius:10,
                 border: 0,
             }}
            >{text}</button>
        )};
        const App = () => {
            const [value, setValue] = React.useState("Save changes");
            const changeValue = () => setValue("Revert changes");
            return (
                <div>
                    <Btn text={value} changeValue={changeValue}/>
                    <Btn text="Continue" />
                </div>
            );
        };

커스텀 컴포넌트에 changeValue라는 prop과 함수를 만들어주고 해당 prop을 자식 컴포넌트에 보낸다. 자식 컴포넌트는 onClick과 같은 이벤트 리스너를 이용해 커스텀 컴포넌트 함수를 작동시킨다. 

 

부모 컴포넌트의 상태가 바뀌면 해당 컴포넌트에 속해있는 자식 컴포넌트들은 전부 re render하게된다.

그렇게 된다면 추후에 많은 양의 컴포넌트가 생겼을 때 느려지거나 할 수 있다. 

        const MemoBtn = React.memo(Btn);
        const App = () => {
            const [value, setValue] = React.useState("Save changes");
            const changeValue = () => setValue("Revert changes");
            return (
                <div>
                    <MemoBtn text={value} onClick={changeValue}/>
                    <MemoBtn text="Continue" />
                </div>
            );
        };
        ReactDOM.render(<App />, root);

그럴땐 React.memo(자식 컴포넌트)를 활용해서 상태가 변한 prop의 컴포넌트만 re-rendering하게 만든다.