Props, State

Props

- properties 의 줄임말로, (비구조할당)상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용.

- props 를 쓰는 것이 좋은 이유는, 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다

 

백지 수표처럼??  => 틀은 유지한 채로, 값만 우리가 원하는대로 바꿔서 여러 개의 변수를 사용한다. 

                                  즉, 백지 수표처럼 수표모양은 그대로인데 원하는 금액을 적어  해당 금액을

                                  사용가능하다

State

state를 설명하기 전에

import React from 'react'

function First() {
  var test = 0;
  const countUp = () => {
    test = test+1;
  };

  return (
    <div>
      {test}
      <button onClick={countUp}>카운트업!</button>
    </div>
  )
}

export default First

이러면 카운트가 올라갈까? 바닐라 자바스크립트 경우에는 잘 올라간다 근데 왜  리액트에서는 안올라갈까? 

콘솔로 값이 증가하는지 확인 할경우는 값이 증가가 된다. 

 

state 즉 상태(값이 변경되는 변수에 대해서)를 사용한 변수 값만 값을 업데이트 해준다. 

 

그럼 어떻게 해당 state를 변경 가능할까? React hook인 useState를 사용해서 변경 가능하다 해당 부분은 

코드 블럭으로 알아보자 

 

const [변수명, set변수명] = useState(변수의 초기값);

변수명에는 수를 선언해주는 것이며(state), set변수명은 변수 데이터 즉 state 값을 변경(업데이트)해주는 함수라 생각 하면된다. 

import React, { useState } from 'react'

function First() {
  const [test, setTest] = useState(0);
  const countUp = () => {
    setTest(test+1);
  };

  return (
    <div>
      {test}
      <button onClick={countUp}>카운트업!</button>
    </div>
  )
}

export default First