[React] Props

Props

props 는 properties 의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 자바스크립트에선 다른 함수에 있는 변수를 가져다 쓸 수 없지만, 컴포넌트 2개가 부모/자식 관계인 경우에는 가능하다.

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단반향 데이터 흐름)
• 로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터)
• state만 전송할 수 있는건 아니며, 무한히 전송이 가능하다.
• <Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고 문자도 가능하다.
• 자식에서 부모, 자식에서 자식에게 전송은 안된다.

적용

let [listName, listChange] = useState(['안녕', '하세요', '헬로']);
{
  modal === true ? <Modal listName={listName} listChange={listChange} /> : null
}
function Modal(props) {
  return (
    <>
      <div className="modal">
        <h4>{props.listName[0]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <button onClick={() => {
        let copy = [...props.listName];
        copy[0] = '하이';
        props.listChange(copy);
      }}>클릭</button>
    </>
  )
}

• 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
• 자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.listName을 사용하면 된다.