React props와 state

[React State & Props]

ㅇ props

  - 외부로부터 전달받은 값

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

  - 클래스, 함수형 컴포넌트에서 사용 가능

  - 여러 개 지정 가능

  - read-only 객체

  - props 사용하기

    1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

    2. props를 이용하여 정의된 값과 속성을 전달한다.

    3. 전달받은 props를 렌더링 한다.

 

ㅇ state

  - 컴포넌트 내부에서 변화하는 값

  - useState : state를 다루는 방법 중 하나

      호출 : import {useState} from "react"

      선언 및 초기화 : const [state 저장 변수, state 갱신 함수] = useState(상태 초깃값);

      배열 반환

  - React component는 state가 변경되면 새롭게 호출되고 리렌더링 된다.

  - React state는 상태 변경 함수 호출로 변경해야 하며 이는 개발자와 react의 약속이다.

    강제로 변경을 시도 시 리렌더링이 되지 않거나 state가 제대로 변경되지 않는다.

  - 이벤트에 함수 전달 시 함수를 호출하는 것이 아니라 "리턴문 안에서 함수를 정의하거나" 

    "리턴문 외부에서 함수를 정의 후" 이벤트에 함수 자체를 전달해야 한다.

    단, 두 가지 방법 모두 arrow function을 사용한 함수를 정의해야

    해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.

*/