React - 상태 끌어올리기, 상태 내리꽂기

Lifting State Up - 상태 끌어올리기

React에서는 부모 컴포넌트가 자식 컴포넌트의 상태를 직접 변경할 수 없다.
자식에서 발생한 이벤트를 부모에서 처리하도록 하는 상태 끌어올리기 패턴을 이용한다.

부모 컴포넌트를 정의하고 그 안에 자식의 상태를 부모안에서 정의한다(상태 끌어올리기)

부모 컴포넌트

const Exam3 = () => {
  // 자식의 상태를 부모에서 정의(상태 끌어올리기)
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  // 자식의 상태를 변경할 수 있는 함수 정의
  const onChangeId = (e) => {
    setId(e.target.value);
  };

  const onChangePw = (e) => {
    setPw(e.target.value);
  };

  return (
    <>
      {/* 컴포넌트 중 Id를 불러 렌더링함 (Id가 Exam3의 자식이 됨) */}
      <Id onChangeId={onChangeId} />

      {/* 컴포넌트 중 Pw를 불러 렌더링함 (Pw가 Exam3의 자식이 됨) */}
      <Pw onChangePw={onChangePw} />

      <div>
        <button disabled={id.length === 0 || pw.length === 0}>Login</button>
      </div>
    </>
  );
};

ID와 PW 둘 다 작성되어야 button 활성화

자식 컴포넌트1

const Id = (props) => {

  const { onChangeId } = props;

  return (
    <>
      <div>
        <label>ID : </label>
        <input onChange={onChangeId} />
      </div>
    </>
  );
};

자식 컴포넌트2

const Pw = ({ onChangePw }) => {

  return (
    <>
      <div>
        <label>PW : </label>
        <input onChange={onChangePw} />
      </div>
    </>
  );
};

• 부모에게서 전달받은 속성을 props 라고 부른다
• 자식은 props 안에 있는 onChangeId 라는 이름의 함수를 이용할 수 있게 된다.
• JSX를 사용한 html 구문 작성부는 무조건 최상위 부모 태그 하나로 감싸져 있어야 한다.
• { } 를 이용하여 props 안에있는 값을 바로 꺼내서 쓸 수도 있다.

---

Props Drilling - 상태 내리꽂기

props를 통해 데이터를 전달할 때, 자식 컴포넌트에서 필요하지 않은 props를 계속해서 전달하는 행위

• 코드의 가동성 및 유지보수성을 떨어뜨린다.
• React Context API나 Redux 같은 상태 관리 라이브러리를 사용한다.

Exam4 > Child1 > Child2 > Child3 > MyComponent 처럼 부모자식 관계가 연결되어 있을 때
Exam4의 상태값을 Mycomponent에서 사용해야 한다면

자식 컴포넌트들

function Child1(props) {
  return <Child2 name={props.name} />;
}

function Child2(props) {
  return <Child3 name={props.name} />;
}

function Child3(props) {
  return <MyComponent name={props.name} />;
}

// 자식 컴포넌트
function MyComponent(props) {
  return <h1>{props.name}</h1>;
}

props는 Exam4에서부터 내리꽂기를 통해 전달받은 부모의 상태값을 나타낸다.

부모 컴포넌트

부모 컴포넌트
function Exam4() {
  const [name, setName] = useState("My nickname is");

  const handClick = () => {
    setName("giveMeTheBell");
  };

  return (
    <>
      <Child1 name={name} />
      <button onClick={handClick}>별명 보기</button>
    </>
  );
}