React state

state란 리액트 컴포넌트에서 데이터를 담기 위한 상자입니다.
자바스크립트에서 어떠한 데이터를 담기 위한 상자로 변수를 배웠습니다. 이와 동일하게, 컴포넌트에서 사용하는 변수를 state라고 지칭합니다.

state: 컴포넌트에서 사용하는 변수(state)
setState: 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 **변수(state)를 만들어주는 기능**

const [변수명, 변수 변경함수] = useState(담을내용 및 초기값)

1. useState로 State변수 만들고, 바꾸기

// 자바스크립트에서 변수 선언 및 바꾸기
let friend = "철수"

friend = "영희"


// react-component 에서 변수 선언
cosnt [friend, setFriend] = useState("철수")

setFriend("영희")

2. 리액트에서 let을 안쓰고 state를 변수로 사용하는 이유

리액트 컴포넌트는 앞쪽에 화면에 보여지는 부분과 뒷쪽에 데이터를 관리하는 부분으로 나눌 수 있습니다.

따라서 만약, 단순히 자바스크립트 변수를 사용해서 좋아요를 화면에 그렸다면, 좋아요가 증가했을 때, 뒷쪽의 데이터 부분만 변경되고, 보여지는 화면에는 반영이 되지 않습니다.

화면에 반영 되길 원한다면, document.getElementById("id")innderText 를 이용해 화면에 직접 반영해주어야 합니다.

하지만, 컴포넌트 변수 state를 사용해 화면에 그리고, setState()를 사용해 변수를 변경해준다면, setState() 안에서 화면을 새롭게 그리는 리렌더링 명령이 실행되어 변경된 데이터가 화면에 새로 그려지게 됩니다.