💎 State
📣 App.js
import State1 from './components/R02_state1.js';
import State2 from './components/R03_state2.js';
function App() {
return (
<>
<h1>Hello React!!</h1>
<div>리액트 배운다~</div>
<State1/>
<State2 init={100}/>
</>
);
}
export default App;
📣 R02_state1.js
🩸 컴포넌트 시작이름은 항상 대문자!!
🩸 리액트는 컴포넌트의 상태가 변할 때 마다 리렌더링을 수행함
( 예전버전에서는 전체를 리렌더링했었는데 요즘 버전부터는 개선되서 바뀌는 그부분만 리렌더링된다 )
★★ const [ 변수, 함수(개발자가만든이름) ] = useState("초기값") == useState를 사용하는 고정구문 ★★
import React, {useState} from 'react';
const InputTest = () => {
const [inputValue, setInputValue] = useState("초기값");
// 변수 함수
// inputValue : 값을 저장하는 변수
// setInputValue : inputValue에 값을 대입하는 setter 역할의 함수
const changInputValue = (e) =>{
console.log(e.target.value);
setInputValue(e.target.value);
}
return(
<input type="text" value={inputValue}
onChange={changInputValue}/>
// onChange={(e) => {setInputValue(e.target.value)}} />
);
}
export default InputTest;
📣 R02_state2.js
🩸 ↓ props = App.js에서 넘겨준 init={100} props.init = 100;
import React, {useState} from "react";
const State2 = (props) => {
const [count, setCount] = useState(props.init);
return(
<div>
<h3>{count}</h3>
<button onClick={()=>setCount(count+1)}>클릭하면 Count 1증가</button>
</div>
);
}
export default State2;
