[React] Props, Event, State

1. Props

• Props (Properties) : 속성 - 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 변수

1-1. Props 예시 1

기존 하드코딩 방식

변경 성공적 ✨

1-2. Props 예시 2

기존 하드코딩 방식

1-3. Props 예시 심화

• Nav 태그 값을 유연하게 변경할 수 있도록 바꿔보자!

기존 하드코딩 방식

 

• 막간을 이용한 오류 일기 😉

자동으로 태그를 생성하는 방식을 사용할 때는, React가 추적하기 위해 중복되지 않는 unique key 값을 넣어주라는 의미

2. Event

2-1. Event 예시 1

• Header 클릭 시 Alert 을 띄워보자!

• event.preventDefault(); : 적용된 태그의 기본 동작 방지 (a 태그일 경우, 페이지 Re-load 방지)

 

 

2-2. Event 예시 심화

• Nav 태그 각각에 alert 이벤트를 거는데, 내용을 다르게 바꾸고 싶을 때!

•  id 값을 넘길 수 있도록, a 태그에 id 속성을 넣어주기 → event.target.id 로 값을 넘겨주면 됨!
  • event.target이란?
    • 이벤트가 발생한 대상 객체를 가져오는 Web API

 

3. State

3-1. 개념

• Props : 컴포넌트의 외부자를 위한 데이터
• State : 컴포넌트의 내부에서 사용하기 위한 데이터

 

3-2. 실습

- Header와 Nav를 클릭할 때마다, 하단 Article 내용을 변경해보자!

• 이 코드의 문제점
  • 이벤트에 연결은 해뒀지만, 클릭한다고 해서 App() 이 재실행 되지 않음 ⇒ 실패 😥

이럴 때 필요한게 State !!!

• React 에 내장된 useState 를 import 하기!
• useState 는 배열이 반환되는데, [0]은 값, [1]는 함수 임

3-3. 추가 실습

• Nav 마다 출력되는 내용을 State로 변경하기

•  막간을 이용한 오류 일기