state

변할수 있는 값이다.

예를들어 쇼핑몰 장바구니 같이 이벤트에 따라 변경되는 것을 말 한다. 이와 같이 컴포넌트 내에서 변할 수 있는건 React state로 다뤄야 한다.

useState 사용법

React에서는 state를 다루는 방법중 하나로 useState라는 함수를 제공한다.

import {useState} form 'react';
로 불러온다.

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

예시

const [isChecked, setIsCheked] = useState(false)
라고 한다면

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초깃값
  이 되는것이다.

state변수에 저장된 값을 사용하려면 JSX안에 직접 불러서 사용하면 된다. 무엇이 boolean값을 가지는지 보자.

<span>{isChecked ? 'Checked!' : 'Unchecked']</span> 

이런게 삼향연산자를 써야한다.

state hook를 사용할때

React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링된다. 는걸 알아야 한다.
상태 변경 함수를 사용해서 변경해야 한다.
push, state[1] = 2;, state = 'wrong state'; 등을 사용하면 이왜안에 빠질 수 있다.

props

컴포넌트의 속성을 의미한다.

props는 변하지 않는 외부로부터 전달받은 값으로, 해당 컴포넌트가 가진 속성에 해당한다.

부모 컴포넌트로부터 전달받은 값이다.

React 컴포넌트는 props를 함수의 전달인자처럼 전달받아 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

객체 형태이다.

props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.

props는 읽기 전용이다.

함부로 변경될 수 없는 읽기 전용 객체이다. 함부로 변경되지 않아야 한다.

props를 직접 수정하면 안된다. 상위 컴포넌트의 값에 영향을 미칠 수 있게 되기 때문이다.