React State & Props

---

React State & Props  

 

 

Props

 

컴포넌트의 특성 (property)를 의미한다.

객체 형태로 존재한다.

변하지 않는 외부로부터 전달받은 값

부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값

함부로 변경될 수 없는 읽기 전용(read-only)객체이다.

 

State

 

애플리케이션의 "상태"

컴포넌트 내에서 변경될 수 있는 값

State Hook, useState

 

useState를 React에서 불러오는 방법

 

import { useState } from "react";

 

useState를 호출하면 배열이 반환된다 ! 

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

 

반환된 배열의 0번째 요소는 state 저장 변수, 1번째 요소는 state 갱신 함수이다.

state는 반드시 state 갱신 함수로 변경해야한다!

 

 

React의 이벤트 핸들링 방식

 

DOM 과 비슷하나 몇 가지 차이가 있다.

이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용.

JSX를 이용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

 

<button onClick={handleEvent}>Event</button>​

 

EX) 쿠X의 쇼핑몰 양식에서 props와 state 나눠보기 예제 👇🏻👇🏻

 

props로 예상 가능한 값 -> 제품컷, 이름, 

state로 예상 가능한 값 -> 할인율, 가격, 배송예상날짜, 상품평, 별점, 적립금

 

---