props 내려주고 받기

리액트의 단방향 데이터 흐름

리액트는 단방향 구조로 데이터가 흐릅니다.

데이터 흐름이 단방향 구조라는 것은 props는 부모가 자식에게만 줄 수 있으며, 자식이 부모에게 줄 수 없다는 것을 의미합니다.

이런 단방향 흐름은 우리가 더 쉽게 어레를 캐치할 수 있게 해주며, 더 깔끔하게 보여줍니다.

부모가 props를 내려주고, 이 props를 자식이 받아오는 예시를 보여드리겠습니다.

props 내려주기 _ 부모 컴포넌트

const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        //variables = $역할
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  };

  const onChangeWriter = (event) => {
    setWrite(event.target.value);
  };

  const onChangeTitle = (event) => {
    setTitle(event.target.value);
  };

  const onChangeContents = (event) => {
    setContents(event.target.value);
  };

  return <BoardWriteUI 
    aaa={onClickSubmit} 
    bbb={onChangeWriter}
    ccc={onChangeTitle}
    ddd={onChangeContents} />;    
}

위와 같이 props를 부모가 자식에게 넘기게 되면,

props = { 
	aaa : onClickSubmit 
    bbb : onChangeWriter
    ccc : onChangeTitle
    ddd : onChangeContents 
    }
    

형태의 객체로 넘어가게 됩니다.

props 받아오기

export default function BoardWriteUI(props) {
  return (
//    <>
//      작성자 : <input type="text" onChange={onChangeWriter} />
//      <br />
//      제목 : <input type="text" onChange={onChangeTitle} />
//      <br />
//      내용 : <input type="text" onChange={onChangeContents} />
//      <br />
//      <button onClick={onClickSubmit}>GRAPHQL-API(동기) 요청하기</button>
//    </>
    
    <>
      작성자 : <input type="text" onChange={props.bbb} />
      <br />
      제목 : <input type="text" onChange={props.ccc} />
      <br />
      내용 : <input type="text" onChange={props.ddd} />
      <br />
      <button onClick={props.aaa}>GRAPHQL-API(동기) 요청하기</button>
    </>
  );
  );
}

파라미터 부분에 props를 적지 않으면 받아 올 수 없으니 꼭 적어주세요 !

부모가 넘겨준 props는 객체로 넘어오기 때문에
받아온 props를 사용하려면 객체의 속성을 꺼내오는 것 처럼 ( onChange={props.ddd} ) 사용해주셔야 합니다.