React 변수 state 이해하기.

변수 state는?

변수 state는 컴포넌트에서 데이터를 담기 위해 사용되는 변수이다.

const [count, setCount] = useState(0) //변수 선언
//const [변수명, 변수바꾸기(함수)] = 변수만들기(“초기값”)

변수를 만들기 위해 사용되는 useState는 hooks의 한 종류이다.
(useState 외 다른 hooks 들은 후에 포스팅 예정)

state 왜 사용하는거지?

state는 변경되면 자동으로 재렌더링 되기 때문이다.
document.getElementById 를 사용하여 요소를 찾아 수정 값을 넣어 줄 필요 없이. 수정값이 바로 요소에 적용되어 화면에 나타난다.
예시

//state 변수 사용 X
export default function CountDocument(){
function plus(){
    const num = document.getElementById("number").innerText
    const result = Number(num)+1
    document.getElementById("number").innerText = result
}
return(
    <div>
        <div id="number">0</div>
        <button onClick={plus}>카운트 증가</button>
    </div>
	)
}

//state 변수 사용 O
import {useState} from 'react'
export default function CountState(){
const [number, setNumber] = useState("0")
function plus(){
    setNumber(Number(number) +1)
}
return(
    <div>
        <div>{number}</div>
        <button onClick={plus}>카운트 증가</button>
    </div>
	)
}

useState를 사용하지 않고 변수를 선언해서 사용하면 안될까?

import {useState} from 'react'
export default function CountState(){
const number = 0
function plus(){
    setNumber(Number(number) +1)
}
return(
    <div>
        <div>{number}</div>
        <button onClick={plus}>카운트 증가</button>
    </div>
	)
}

useState를 사용하지 않고 변수를 만들어 사용하면 count 숫자 자체는 증가하는 것을 콘솔창을 통해 확인할 수 있다. 하지만 화면에 숫자는 변하지 않는다. 변경된 number의 값이 화면에 반영되지 못하는 문제점이 발생한다.

component란?

UI 또는 기능을 부품화해서 재사용이 가능하게 하는 것.

component는 같은 코드를 여러번 복사 붙이기?

component는 main이 되는 원본을 두고 필요에 의해 import 하여 사용하게된다. 따라서 속성을 한번에 바꿔야 하는 경우 원본 코드의 수정만으로 여러개의 컴포넌트 속성을 동시에 변경할 수 있다. 여러개의 동일한 코드를 복사 붙이기 한 경우 하나하나 다 속성을 변경해야하는 번거로움과 비교하면 훨씬 좋은 방법이다.
또한 import 하여 사용된 컴포넌트는 독립적으로 수정이 가능하다.

component는 작은 기능 단위로 이루어지는가?

여러 기능을 가진 하나의 페이지도 하나의 큰 컴포넌트가 될 수 있으며, 이를 페이지 컴포넌트라 부른다. 따라서 컴포넌트 안에 또 다른 컴포넌트가 존재하는 것은 가능하다.

함수형 component

//함수형 컴포넌트 사용 예시

funtion 함수이름(){
	return(
    <div></div>
    )
   }

컴포넌트에는 함수형과 클래스형이 있다. 현재에는 함수형 컴포넌트가 더 많이 사용된다. 함수형 컴포넌트는 클래스 컴포넌트보다 늦게 등장했다. 원래의 함수형 컴포넌트는 state, lifecycle 관련한 기능을 사용할 수 없었다. 후에 hooks를 통해 제한되었던 기능이 사용가능하게 되면서 함수형이 더 널리 쓰이게 되었다.
또한 클래스 컴포넌트보다 메모리 자원이 적게 사용되는 장점을 지닌다.

Truble shooting

useState를 사용해 변수를 선언하는 과정에서 오류 발생.
원인/해결: state 변수를 선언하기 위해 useState를 사용하려면 react로 부터 import 해오는 과정이 필수적이다.

//해결 코드
import {useState} from 'react'