State

현재 컴포넌트의 상태

props 와 state

props vs state

props
컴포넌트로 부터 전달
함수 파라미터로 접근가능(props)
불변(immutable), 자식 컴포넌트로 props의 값을 변경할 수 없음

state
컴포넌트 내부에서 관리
함수 내부에서 변수가 선언(useState)
변경가능

props & state

props와 state 모두 사용자 인터페이스(UI)에 영향을 미치는 정보를 가지고 있다.

사용 예제

useState

함수형 컴포넌트에서 state를 선언하기 위해서 사용되는 Hook이다.

const [ message, setMessage ] = useState('환영합니다.');

useState는 구조 분해 할당으로 배열의 값을 받아서 state를 선언한다.

배열 첫번째 인자 : 값을 사용할 때 사용되는 변수(선언)
배열 두번째 인자 : 값을 변경할때 사용되는 함수
useState() 인자 : 선언된 변수의 초기값을 설정

state 사용

배열의 첫번째 인자로 사용된 변수명을 사용하면 된다.

 return (
        <div>
            {message}
        </div>
    )

state 값 변경

배열의 두번째 인자로 사용된 함수의 인자로 값을 넘기면 선언된 state의 값이 변경이 된다.

  return (
        <div>
            <h1>{message}</h1>
            <button onClick={() => setMessage('반갑습니다.')}>변경</button>
        </div>
    )