[React🩵] props와 리액트의 데이터 단방향 흐름

핵심 키워드 정리

• state : 컴포넌트가 가지고 있는 데이터
• props : 부모가 자식에게 넘겨주는 값
• 단방향 흐름 : 데이터는 위에서 아래로만 흐른다(부모→자식)

 

먼저 중요한 개념은

자식은 부모의 상태(state)를 직접 바꿀 수는 없다.
하지만 자식은 부모가 넘겨준 함수를 통해 호출해서 이벤트 발생했다고 알려줄 수 있다.

 

 

 

“데이터는 부모에서 자식으로 흐르고, 자식은 부모가 넘겨준 함수를 호출해 상호작용한다.”

 

 

 

 

간단한 좋아요 버튼 예제로 알아보기!

import { useState } from "react";

// 부모 컴포넌트
function App() {
  const [likes, setLikes] = useState(0); // 상태는 부모가 가짐

  function handleLike() {
    setLikes(likes + 1); // 상태 업데이트
  }

  return (
    <div>
      <h1>좋아요 개수: {likes}</h1>
      <LikeButton onLike={handleLike} />
    </div>
  );
}

// 자식 컴포넌트
function LikeButton({ onLike }) {
  return <button onClick={onLike}>좋아요</button>;
}

export default App;

 

위 코드를 살펴보면,

 

부모 컴포넌트인 App()은 likes의 상태(state)를 가지고 있으며, handleLike 함수를 통해 이 상태를 업데이트 할 수 있다

자식 컴포넌트인 LikeButton()는 <button> 요소를 가지고 있고, 버튼의 클릭 이벤트 onClick이 발생하면 부모에게 props로 전달받은 onLike 함수를 호출한다(부모에게 요청)

 

여기서 onLike 함수는 자식이 만든 것이 아닌, 부모가 만들어서 자식에게 props로 내려준 함수이다

결론적으로 버튼이 클릭되면, 부모 컴포넌트에 연결된 <LikeButton onLike={handleLike}>가 실행되며 최종적으로 handleLike()가 실행된다

이때, 컴포넌트의 리렌더링이 일어난다!