props와 state 차이 쉽게 정리

props와 state 차이에서 먼저 볼 부분

props는 밖에서 들어오는 값이고 state는 컴포넌트 내부에서 변하는 값입니다. 이 차이를 알아야 React 데이터 흐름이 보입니다.

props는 부모 컴포넌트가 자식에게 전달하는 입력값입니다. 자식은 받은 값을 화면에 보여주지만 직접 바꾸지는 않는다는 감각이 중요합니다.

state는 컴포넌트가 스스로 기억하는 값입니다. 버튼 클릭, 입력창 변경, 탭 전환처럼 사용자 행동에 따라 화면이 달라질 때 사용합니다.

데이터가 어디에서 시작되고 어디에서 바뀌는지 추적하면 React 오류를 훨씬 쉽게 찾을 수 있습니다.

사용자 카드와 좋아요 상태

function UserCard({ name }) {
  const [liked, setLiked] = React.useState(false);

  return (
    <article>
      <h2>{name}</h2>
      <button onClick={() => setLiked(!liked)}>
        {liked ? "좋아요 취소" : "좋아요"}
      </button>
    </article>
  );
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

props와 state 차이 쉽게 정리 비교 기준

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 부모가 내려주는 값인지 확인하기
• 사용자 행동으로 바뀌는 값인지 확인하기
• props를 직접 수정하지 않기
• state 변경은 setter 함수로 하기