[React] Props&State

Props

props는 properties를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
변하지 않는 외부로부터 전달받은 값으로, props의 값은 부모 컴포넌트에서 설정할 수 있다. props로 적합한 예시로는 이름이나 성별, 혈액형 등 변하지 않는 것들이 있다.
어떤 타입의 값도 넣어서 전달할 수 있도록 객체의 형태를 지니며, 함부로 변경될 수 없는 읽기 전용 객체이다. 만약 읽기 전용 객체가 아니라면 하위 컴포넌트 내에서 props를 수정했을 때 해당 props를 전달한 상위 컴포넌트의 값에도 영향을 미칠 수 있다. 이는 개발자가 의도하지 않은 side effect를 일으키고, 리액트의 단방향, 하향식 데이터 흐름 원칙에 위배된다.

Props 사용법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

State

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. state의 적절한 예시로는 나이나 주소, 좋아하는 음식 등 바뀔 수 있는 것들이 적합하다. state는 변경될 때 컴포넌트가 리렌더링된다.

useState

예전에는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 하지만 Hooks라는 기능이 도입되면서 상태를 관리할 수 있게 되었는데 useState도 hooks중 하나이다.
useState를 사용하면 컴포넌트에서 상태를 관리할 수 있으며, import 키워드를 사용하여 React로부터 useState를 불러와 사용할 수 있다.

import { useState } from "react";

useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초깃값이다.

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