props

바다캔디·2025년 5월 18일

리액트공부

목록 보기
3/39

props

컴포넌트 간의 값을 주고받기 위해 사용되는 기법.
js 파라미터 문법이랑 비슷함.

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해야됨.

부모 -> 자식으로 전송은 가능.
자식 -> 부모나
자식 -> 자식은 불가.

전송방법

  1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 제목={부모가 가지고있는 state} />
  • 꼭 state가 아니여도 됨. 일반 변수, 함수, 문자 등등 다 넘겨짐.
      {modal == true ? (
        <Modal
          글제목={글제목}
          changeTitle={changeTitle}
          글제목변경={글제목변경}
        />
      ) : null}
  1. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
const Modal = (props) => {
  return (
    <div className="modal">
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          props.changeTitle();
        }}
      >
        글수정
      </button>
    </div>
  );
};

0개의 댓글