React _ Component 간 통신 연습

1. 하위 컴포넌트 변경(상->하)

• A 컴포넌트에서 button에 onClick 이벤트 만들고 버튼 클릭하면
  -> A의 state 변경해 B로 내려주는 props 변경
  -> C, D, E 순서대로 props 전달

// ./src/components/A.jsx
export default function A(){
  const [value, setValue] = useState('아직 안바뀜');
  return (
    <div>
      <B value={value}/>
      <button onClick={click}>E의 값 바꾸기</button>
    </div>
  );

  function click(){
    setValue("E의 값 변경");
  }
}

function B({value}){
  return (
    <div>
      <p>여긴 B</p>
      <C value={value}/>
    </div>
  );
}

function C({value}){
  return (
    <div>
      <p>여긴 C</p>
      <D value={value}/>
    </div>
  );
}

function D({value}){
  return (
    <div>
      <p>여긴 D</p>
      <E value={value}/>
    </div>
  );
}

function E({value}){
  return (
    <div>
      <p>여긴 E</p>
      <h3>{value}</h3>
    </div>
  );
}

2. 상위 컴포넌트 변경 (하->상)

• A에 함수 만들고 함수 안에 state 변경 구현
  -> 함수를 props에 넣어 B, C, D, E로 전달
  -> E에서 클릭하면 props로 받은 함수 실행

export default function A(){
  const [value, setValue] = useState("아직 안바뀜");
  return(
    <div>
      <p>{value}</p>
      <B setValue={setValue}/>
    </div>
  );
}

function B({setValue}){
  return(
    <div>
      <p>여긴 B</p>
      <C setValue={setValue}/>
    </div>
  );
}

function C({setValue}){
  return(
    <div>
      <p>여긴 C</p>
      <D setValue={setValue}/>
    </div>
  );
}

function D({setValue}){
  return(
    <div>
      <p>여긴 D</p>
      <E setValue={setValue}/>
    </div>
  );
}

function E({setValue}){
  return(
    <div>
      <p>여긴 E</p>
      <button onClick={click}>클릭</button>
    </div>
  );

  function click(){
    setValue('A의 값 변경');
  }
}