트렌드 인사이트

Props와 State가 헷갈린다면, 숙소 카드 하나로 정리하는 리액트 5차시

2026년 10월 25일0
Props와 State가 헷갈린다면, 숙소 카드 하나로 정리하는 리액트 5차시

처음 배우는 리액트 5차시 · 컴포넌트 만들기 · 40분

Props를 활용해 숙소 정보 카드를 렌더링하는 리액트 실습 화면

Props는 밖에서 받는 값, State는 안에서 바뀌는 값. 말로는 쉬운데 코드로 쓰면 자꾸 섞입니다. 5차시는 숙소 정보 카드 하나로 둘을 나눠 봅니다. 듣고 나면 데이터를 어디에 둘지부터 정하고 컴포넌트를 짜게 됩니다.

  • Props로 그리기 — 이름·가격·평점을 넘겨 숙소 카드를 렌더링합니다.
  • State로 바꾸기 — useState로 좋아요 여부를 기억합니다.
  • 이벤트로 연결 — onClick 한 번에 하트가 바뀌는 흐름을 만듭니다.

onClick 이벤트로 좋아요 버튼 상태를 바꾸는 리액트 실습 화면


9차시4시간 40분 · 수강 기간 30일

실습은 브라우저의 CodeSandbox 화면에서 코드와 미리보기를 나란히 보며 진행됩니다. 바로 앞 3~4차시에서 컴포넌트와 JSX를, 뒤의 6~7차시에서 Hooks와 이벤트를 더 깊게 다룹니다. 전체 커리큘럼 보기 →

#React Props#React State#리액트 컴포넌트#onClick#리액트 실습

댓글

0/1000

불러오는 중...