React State & Props

▶️ Props : 외부로부터 전달받은 값 (이름, 성별) 컴포넌트의 속성, property

▶️ State : 내부에서 변화하는 값 (나이, 현재 사는 곳, 취업여부, 결혼/연애 여부)

Props

React에서 속성과 값 할당하는 법

HTML way: <a href="www.codestates.com">Click me to visit Code States</a>

React way: 형식으로, → <Child text={"I'm the eldest child"} /> (text 라는 속성을 선언하고, 이 속성에 "I'm the eldest child"라는 문자열 값을 할당하여 컴포넌트에 전달)

props는 객체 형태❗️ 속성 여러개 가능❗️ ex.→ {"name: 김코딩, date: 2019-04-30, 제품가격: 12000원"}

State

useState 를 이용하기 위해서는 React로부터 useState 를 불러와야 한다. import 키워드로 useState 를 불러오자.

import { useState } from "react";

useState 문법 예시:

useState을 사용해서 새로운 state 선언할 때 [count, setCount]라고 배열형태로 선언해야 한다.

→ useState의 반환값이 배열이라서 !

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초기 값);

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초기값