3주차 WIL(Props)

Props

1. 정의: 부모가 자식 컴포넌트에 물려준 데이터를 말하며 컴포넌트 간의 정보 교류 방법

2. 특징
    1) 부모 -> 자식 방향으로만 흐름
    2) 읽기 전용으로 취급하며, 변경하지 않음
    3) props는 object literal의 형태를 가짐
  
3. 전달
    function Mother() {
    	const name = 'kim';
    	return <Child motherName={name} />  //mothertName으로 자식 컴포넌트에게 전달
    }
    
4. 받기
    function Child(props){
        return <div>{props.motherName}</div>  // props로 전달받으며, 변수명은 상관 없음
    }
    
5. props dilling: props가 꼬리의 꼬리를 무는 형태

6. props Children: 자식 컴포넌트에서 정보를 받는 방식으로 이름이 children으로 고정

 

Props 추출

1. 구조분해할당 활용
	function Todo({ title, body, isDone, id }){
		return <div>{title}</div>
	}
=> {}로 감싸면 prop.title로 표현하지 않아도 됨

2. defaultProps: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값
    자식함수.defaultProps={
        name: 'kim'
    }
    
3. default Argument: defaultProps와 같은 역할
    function multiply(a, b = 1) {
      return a * b;
    }