React - Props & State

React - Props 란?

Props는 외부에서 전달받은 값으로, 이름이나 성별처럼 변하지 않는 값이다. 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. Props는 또한 상위 컴포넌트로부터 전달 받은 값이다. React 컴포넌트는 javascript함수와 클래스로, props의 함수의 인자를 전달받아 화면에 어떻게 표시되는지 기술하는 React element를 반환한다.

Props는 객체의 형태를 가지며, 함부로 변경될 수 없기에 읽기 전용이다. Props를 사용하는 방법은

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

Props 예제

function Adult() {
  return (
  	<div className="adult">
    	<h1>the adult</h1>
    	<Kid text={"the kid"} />
		<Kid />
    </div>
  );
}

function Kid(props) {
  return (
    <div className="kid">
    	<p>(props.text}</p>
    </div>
  )
}

React - State 란?

State는 컴포넌트 사용 중에 내부에서 변할수 있는 값을 말한다. 쇼핑몰 웹사이트의 장바구니를 예로 들면, 사용자는 구매할 물건과 구매하지 않을 물건을 체크박스로 구분 짓는다. 여기서 상태를 구분해본다면 '체크가 된 상태', '체크가 안 된 상태' 이다.

React에서 State를 다루는 방법 중 하나로, useState 라는 특별한 함수를 쓴다. useState를 사용하려면 React에서 불러와야 한다.

import { useState } from "react";

이후 useState를 컴포넌트 안에서 호출해주면 된다. 여기서 호출한다는 것은, "state"라는 변수를 선언하는 것과 같다고 보면 된다.

useState 예제

function Checkbox() {
  //새로운 변수 state를 선언
  const [isChecked, setIsChecked] = useState(false);
}

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

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