#4 [2021 UPDATE] PROPS

#4.0 Props

분할, 정복

 

로직을 고립시켜서 분리된 컴포넌트로 만든다!

 

부모 컴포넌트는 App

 

Props는 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전송하는 방식.

부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 됨

하나의 버튼을 props을 이용해 재사용함!

 

component는 단지 function(함수) 으로 JSX 반환함 => 함수형 컴포넌트

 

property => object로 모두 들어간다!

 

function Btn({text}) { // props는 object 
// shortcut (props -> {text, onClick}) 변경!
	return (
    <button 
    	onClick={onClick} // onClick 이벤트 리스너 설정
        style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10
        }}>{text}</button>
    );
}

function App() { // 컴포넌트
// JSX의 내부
	const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Chagnes");
    
	return (
    	<div>
        	<Btn text="hobi" onClick={changeValue}/> // onClick은 이벤트 리스너가 아니고 하나의 props 이름
            <Btn text="noni" check={false}/> // property -> object로 모두 집어 넣는다.
        </div>
	);
}

 

#4.1 Memo

props로 function도 보낼 수 있음

 

부모 컴포넌트가 state(상태)를 변경할 때 어떤 일이 발생하는지 확인해보자!

 

Btn onClick function 추가 -> props로 인식됨

 

props 값을 넣어도 자동적으로 return 안으로 들어가지 않으므로, 내가 원하는 곳에 직접 사용해야함!

 

부모 컴포넌트의 state(상태) 변경될 때 return () 안에 있는 모든 게 새로 render 렌더링됨

 

// props가 변경되지 않는 한에서 state 변경 시 render 되지 않도록 설정 => React Memo

const MemorizedBtn = React.meno(Btn);

<MemorizedBtn text="noni" />

 

props가 변경되지 않는 한에서 state 변경 시 다시 render 되지 않도록 설정 => React Memo (Tiny bonus)

 

 

#4.2 Prop Types

state, props에 대해 알아봤으니 연습할 시간!

 

props는 원하면 어떤 prop이든 보낼 수 있게 해주고, 우리가 하고 있는 무엇이든 가능하게 해주는 아주 멋진 녀석!

 

PropType은 어떤 타입의 prop을 받고 있는지를 체크해줌

 

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

 

 

#4.3 Recap

설정 가능한 컴포넌트 생성하고 재사용

 

prop들은 렌더링 되고 있는 Btn 컴포넌트의 부모로부터 전달되고 있음

 

전달된 모든 prop들은 하나의 오브젝트로서 받는다는 것