React의 State?

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작에 의해 변할 수 있고 사용자의 입력에 따라 새로운 값으로 변경될 수 있다 State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 해준다. State를 console.log로 확인해 보면 배열이라는 것을 알 수 있다.

import React, {useState} from "react"; // useState를 react로부터 불러온다.

function Counter({title, initValue}) {

  let countState = useState(initValue); //useState로 initValue를 감싸주고, 
  const count = countState[0]; //count의 갑을 직접 바꾸면 절대 금지! 따라서 const를 써준다.
  const setCount = countState[1]; // 마찬가지로 함수값도 바뀔이유가 없기 때문에 const를 써준다.

// const [count, setCount] = useState(initValue); -> 이와 같이 구조분해 할당 방식으로 한줄로 나타낼수있다.

  function up(){
    setCount(count + 1);
  }      
	return (
    <>
			<h1>{title}</h1>
			<button onClick={up}>+</button> 👉🏻 {count}
		</>
	)
}

function App() {             
  return(
    <>
		<Counter title="중간고사 카운터" initValue={10}></Counter>         
		<Counter title="기말고사 카운터" initValue={20}></Counter>         
		</>
	)
}
  export default App;

 

read	update
count	setCount

= useState(initValue)이다. 배열의 첫 번째 값은 초기값을 읽고, 두 번째 값은 값을 update 시킨다.

이렇게 하면 어느 정도의 React 뼈대는 완성이다. 다음에는 css style 입히는 것을 해보자!