React에서 부모에서 자식 간에 값을 넘기는 방법에 대해 정리해보았다.

부모에서 자식으로 값 전달

부모에서 Props를 이용해서 Child 컴포넌트에 전달한다.

 ⭐ props를 이용한다.

props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.

(자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻)

자식이 부모로부터 받아온 값을 사용할 때 방식

객체 비 구조화를 사용하여 props를 선언한다. 이 경우, Child 컴포넌트는 user라는 속성을 직접 사용할 수 있다. 이 방식은 코드를 간결하게 유지하고 가독성을 높일 수 있다.

2번 방식은 props라는 객체를 통해 모든 props를 받는다. 여기서 props.user를 통해 user 속성에 접근한다. 이 방식은 명시적으로 props 객체를 통해 모든 속성을 받아오기 때문에, 명시성이 높아지지만 코드가 약간 더 길어질 수 있다.

// index.tsx - parent
export default function Home() {
  const [user, setUser] = useState("firstUser");

  return (
     <section css={HomePage}>
       <Child user={user}></Child>
     </section>
  );
}

// components/Child.tsx - child
// 1번 방식
interface User {
  user: string;
}

export default function Child({ user }: User) {
  return <p>{user}</p>;
}

// 2번방식
interface User {
  user: string;
}

export default function Child(props: User) {
  return <p>{props.user}</p>;
}

자식에서 부모로 값 전달

부모 컴포넌트에서 state를 변경하는 함수를 전달한다.

⭐ 함수를 이용한다.

부모가 props로 함수를 넣어주면 자식이 그 함수를 이용해 값을 건네주는 방식이다.

// index.tsx - parent
export default function Home() {
  const [user, setUser] = useState("firstUser");

  const changeUser = (user: string) => {
    setUser(user);
  };

  return (
     <section css={HomePage}>
       <Child changeUser={changeUser}></Child>
       <p css={{ margin: " 0 auto" }}>{user}</p>
     </section>
  );
}


// components/Child.tsx - child
interface User {
  changeUser: (x: string) => void;
}

export default function Child(props: User) {
  function change() {
    props.changeUser("secondUser");
  }

  return <button onClick={change}>Change</button>;
}