React state, props

본 내용은 함수형 컴포넌트를 기준으로 작성하였습니다

컴포넌트에서의 변수 state와, 상위컴포넌트(부모컴포넌트)에서 하위컴포넌트(자식컴포넌트)에게 값을 전달할때 사용하는 props에 대해 알아보자

---

State

state란 간단하게 말하면 컴포넌트에서의 변수라고 생각하면 된다
state의 기본 문법으로는

const [fruit, setFruit] = useState("사과")
console.log(fruit)	//	"사과"

setFruit("바나나")
console.log(fruit)	//	"바나나"

state: 컴포넌트에서 사용하는 변수
setState: 변수의 값을 변경
useState: 변수를 선언 및 초기값, 생락이 가능: useState()

위와 같이 사용할수 있다

---

왜 굳이 기존의 변수 const, let, var를 사용하지 않고 이런것을 사용하나?

기존의 방식으로 번튼을 누를시 카운트가 증가하는 코드를 작성한다 해보자

export default function StateAndProps() {

  function onClickCountUp() {
    const count = Number (document.getElementById("Num").innerText) + 1
    document.getElementById('Num').innerText = count;
  }

  return (

    <div>
      <div id="Num">0</div>
      <button onClick={onClickCountUp}>카운트 올리기!!!</button>
    </div>
  )
}

이러한 방식으로 작성했을거다
이런게 여러개가 있으면 복잡하고 읽기가 힘들었을거다

이걸 state를 사용하여 작성을 해보자

import {useState} from "react"

export default function StateAndProps() {
  const [count, setCount] = useState(0)

  function onClickCountUp() {
    setCount(count + 1)
  }
  
  return (

    <div>
      <div>{count}</div>
      <button onClick={onClickCountUp}>카운트 증가</button>
    </div>
  )
}

위와 같이 작성할 수 있다

state와 기존의 변수와 가장 큰 차이는 state는 값이 변경 될시 자동으로 리렌더링을 해서 값이 변한것을 알수 있지만 기존의 방식은 dom을 사용해야 하는것이다

---

setState의 작동원리

setState를 사용 -> 기존의 state와 값을 비교 -> 다르면 값 변경 같으면 변경안함 -> 리렌더링
위와 같은 순서로 작동한다

그렇다면 이런 코드는 어떻게 작동 하겠는가?

const [count, setCount] = useState(0)

const CountUp = () => {
  setCount(1)
  setCount(2)
  setCount(3)
  setCount(4)
  setCount(5)
  console.log(count)
}

count와 setCount(1) 값비교 및 리렌더링
count와 setCount(2) 값비교 및 리렌더링
.
.
.
이렇게 작동한다면 매우 비효율 적일것이다

그래서 setState는 값을 모두 비교한 후에 최종 값을 함수가 종료되면 리렌더링을 진행하게 된다

---

props

상위컴포넌트(부모컴포넌트)에서 하위컴포넌트(자식컴포넌트)에게 값을 전달할때 사용한다

단방향으로 작동하기 때문에 상위에서 하위로만 전달이 가능하다

container, presenter 패턴으로 작성된 코드에서 props를 사용해보자

import {useState} from "react"
import StateAndPropsPresenter from "./"

export default function StateAndPropsContainer() {
  const [count, setCount] = useState(0)

  function onClickCountUp() {
    setCount(count + 1)
  }
  
  return (
	<StateAndPropsPresenter
      Number={count}
      />
  )
}

props는 객체형태로 하위로 전달되게 된다

JSX영역을 보면 Number를 Key로, {count}를 Value로 해서 StateAndPropsPresenter에게 전달하고 있는 모습이다

export default function StateAndPropsPresenter(props) {

  return (

    <div>
      <div>{props.Number}</div>
      <button onClick={onClickCountUp}>카운트 증가</button>
    </div>
  )
}

파라미터 부분에 props로 받고 JSX에 {props.Number}로 사용하고 있는 모습이다
파라미터를 굳이 props로 하지 않고 abc로 해도 된다 그렇다면 {abc.Number}로 사용하면 된다

---

참조
https://ko.reactjs.org/docs/faq-state.html
https://ko.reactjs.org/docs/components-and-props.html