우리가 어떤 값을 component에게 전달 해줘야 할 때 사용함

붕어빵 틀이라고 생각하면 된다. 어떻게되어도 리액트가 불변성을 가지고 있는 자바스크립트

라이브라는 것을 잊어선 안됌

부모 -> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}>
</Modal 글제목={글제목}> => props로 전달해 주세요.

2. props 파라미터 생성 후 props.작명 사용 // 그럼 이게 부모인가?

코드로 구현하자면

function app () {
	return (
	</Modal 글제목={글제목}> --> 자식 컴포넌
	)
}

function Modal (props){
	<h4>{props.글제목[0]}</h4>
}

색상을 각각 바꾸고 싶다면?

<Modal style = {color: blue}>
<Modal style = {color: orange}>
<Modal style = {color: red}>

function Modal(props) {
  return (
    <div className="modal" **style={{ background: props.color }}> // 구멍뚫기**
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

** 참고 props도 일반 문자를 전송 가능하다.

버튼 누르면 글 변경하기

// 해결: 함수를 부모에서 생성하고, 해당 함수를 props로 전달하여 실행

<Modal color={"orange"} 글제목={글제목} 변경함수={변경함수}></Modal> // 자식 컴포넌트

// 해당 함수
let 변경함수 = () => {
    let newTit = [...글제목];
    newTit[0] = "여자코트 추천";
    제목수정(newTit);
};

function Modal(props) {
  return (
   <button onClick={props.변경함수}>글수정1</button>
  );
}

// 정답: 새로운 함수를 생성하지 않아도 됩니다. state의 B가 함수이므로, 해당 값을 전달하면 됩니다.

let [글제목, 글제목변경] = useState(["남자코트","중성코트"])

<Modal color={"orange"} 글제목={글제목} 글제목변경={글제목변경}></Modal> // 자식 컴포넌트

<button onClick={() => props.글제목변경(["여자코트", "중성코트"])}>글수정1</button>