React State & props

유연희·2022년 5월 23일
0

state vs props

state와 props(properties)는 자바스크립트에서 사용되는 객체이다. state와 props는 모두 렌더링 결과물에 영향을 주는 데이터를 갖는다.

state와 props의 가장 큰 차이로는 state는 컴포넌트 안에서만 관리되는 반면에, props의 경우 하위 컴포넌트로 변수를 전달할 수 있다는 것이다.

state

state의 변수는 리엑트 전용 변수로도 불린다. let const 등과 같이 선언되는 변수와 용도는 같지만, state는 변동사항이 생기면 state를 사용하는 html도 자동으로 렌더링 하여 화면에 보여준다.

const [state, setState] = useState()
const [변수명, 변수바꾸기(함수)] = 변수만들기(초기값)

state 변수 사용 예시

버튼을 클릭하면 count라는 변수 값이 하나씩 증가하고 자동 렌더링 되며 화면에 보여지는 count도 하나씩 증가하게 된다.

import { useState } from "react";
export default function CounterStatePage() {

  const [count, setCount] = useState(0);
  
  function counter() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>UP COUNT!!</button>
    </div>
  );
}

props 사용 예시

입력칸이 다 채워지면 버튼의 활동 상태를 boolean값으로 저장하고 있는 변수를 생성하고, 조건에 만족하면 값이 바뀐 변수를 자식 컴포넌트로 전해준다.

props를 이용해 받은 버튼의 활동상태를 담고있는 변수를 이용해 버튼 속성을 바꾸어준다.

profile
developer

0개의 댓글