[ React ] 4. Props

이제 객체지향 느낌이 남

 

각 기능별로 쪼개서 그 Property들을 갖다 쓴다.

 

예를 들어 하나의 함수에 button을 만들어 여러 스타일을 입혀줬다.

또 다른 버튼을 만드는 함수를 만들어서 비슷한 스타일을 넣으려면 하나하나 다 복사해야한다.

만약에 text만 다른데 그렇게 여러 함수를 만들면 오히려 복잡해지므로,

button만드는 함수를 만든 뒤에 각각 parameter에 쓸 text를 넣어서 그걸 띄우자.

 

function Btn(props){ // props 말고 {banana}라고 쓰면 바로 그걸 가져옴

            console.log(props);

            return(

             <button style={{

                backgroundColor:"tomato",

                color:"white",

                padding:"10px 20px",

                border:0,

                borderRadius:10

             }}>         

               {props.banana} //그럼 여기에 {banana}만 해도 됨

             </button>

            )

        }

이거를 이제 밑에서 각각 띄울 때는

 

function App() {

            return (

                <div>

                    <Btn banana="Save Changes"/>

                    <Btn banana="Continue"/>

                </div>

            );

        }

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

 

 

이렇게 하면 되지롱

 

 

 

 

---

function App() {

            const [value,setValue] = React.useState("Save Change");

            const changeValue = () => setValue("Revert Changes");

             

            return (

                <div>

                    <Btn banana={value} hello={changeValue} />

                    <Btn banana="Continue"/>

                </div>

            );

        }

이렇게 하면 모든 Btn이 변하지 않아도 둘 다 계속 render된다.

이러한 상황은 component의 개수가 많아지면 많이질수록 컴퓨터 성능 저하의 원인이 된다.

 

이럴 때는 memo를 사용할 수 있다.

 

 const MemorizedBtn = React.memo(Btn)

함수 위에 이거 하나를 놓는다. memo라는 뜻은

()에 들어간 property 중에 이전과 변한 게 있는 것만 re-render 하겠다

 

즉 위에 나온 한 줄은 Btn 중에 변한 게 있는 것만 render하는 걸로 한다.

 

그리고

          <MemorizedBtn banana={value} hello={changeValue} />

          <MemorizedBtn banana="Continue"/>

이렇게 바꿔주면 끝

 Btn.propTypes ={

            banana: PropTypes.string

        };

어떤 항목에 어떤 타입의 데이터가 들어가야하는지 설정하는 거