TIL .ver2 state에관하여

금일은 1일차 내가말했던 react에서 가장 중요한 state문에대해서 배워봤다

state란? 함수 내에 선언된 변수와같이 컴포넌트가 렌더링한
결과물에 영향을 주는 데이터를 지닌 객체이다.

state 값을 바꾸는것은 setState() 함수를 이용하여야만 가능하다.

ex)

Const [ state, setState ] = useState("철수")

의 경우에 [] < 변수명
useState <변수바꾸기
("") < 변수만들기 라 한다

state 를 사용하는 이유에는 여러가지 이유가 있는데 가장 큰 이유는 간편성이다, state를 이용시 코드는 보다 가독성이 훨씬높아진다 카운트를 1씩 올리는 버튼 만드는것으로 예를 들어보면

기존)

export default function CounterDocumentPage (){

function counter(){
    const result = Number (document.getElementById("count").innerText) + 1
    document.getElementById("count").innerText = result
}

return(
    <div>
        <div id="count">0</div>
        <button onClick={counter}>카운트 올리기!!!</button>
    </div>

)

}

기존의 getElementById 로 다소 번거로울수도 있게 지정했던것과 달리 state를 사용하면

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}>카운트 올리기!!!</button>
</div>
)}

가독성이 훨씬 좋아진다 또한 카운트를 내릴경우에는 해당 + 대신 -만 삽입하면 된다.

훨씬더 간편해지긴했지만 아직 내머리에 완벽히 이해가된건아니라 계속 보면서 익숙해져야겠다 ( __)...