728x90
State
컴포넌트 내부에서 바뀔 수 있는 값
UI를 바꾸기 위해서 사용.
리액트에서 변경되야 하는 값은 반드시 State로 선언해야 함.
App.jsx
import {useState} from 'react';
import "./App.css";
function App() {
const [name, setName] = useState('김할아버지');
return (
<div>
{name}
<br />
<button onClick={function() {
setName('박할아버지');
}}>클릭</button>
</div>
);
}
export default App;
App.jsx
import {useState} from 'react';
import "./App.css";
function App() {
const [fruit, setFruit] = useState("");
return (
<div>
과일 : <input
value={fruit}
onChange={function(event) {
console.log('event', event);
}}
/>
<br />
{fruit}
</div>
);
}
export default App;
App.jsx
import {useState} from 'react';
import "./App.css";
function App() {
const [fruit, setFruit] = useState("");
return (
<div>
과일 : <input
value={fruit}
onChange={function(event) {
// console.log('event', event.target.value);
setFruit(event.target.value);
}}
/>
<br />
{fruit}
</div>
);
}
export default App;
input값과 State값 동기화
실습
아이디 비번 입력받아 state로 관리해주고 변경이 일어날 때마다 setState로 동기화
alert를 띄우고 아이디와 비밀번호 영역을 초기화 해주세요!
비밀번호는 보이면 안됩니다.
App.jsx
import {useState} from 'react';
import "./App.css";
function App() {
const [id, setId] = useState("");
const [pw, setPw] = useState("");
return (
<div>
아이디 : <input
value={id}
onChange={function(event) {
// console.log('event', event.target.value);
setId(event.target.value);
}}
/>
<br />
비밀번호 : <input
type='password'
value={pw}
onChange={function(event) {
// console.log('event', event.target.value);
setPw(event.target.value);
}}
/>
<br />
<button onClick={function() {
alert(`고객님이 입력하신 아이디는 '${id} 이며, 비밀번호는 '${pw}'입니다.`)
setId("")
setPw("")
}}>로그인</button>
<br />
{id}
<br />
{pw}
</div>
);
}
export default App;
불변성 & 순수함수
컴포넌트의 생명주기
render..
불변성 : 메모리에 있는 값을 변경할 수 없는 것.
원시데이터
원시데이터 : 숫자, 문자, 불리언 ... → 불변성이 있다.
원시데이터가 아닌 것들 : 배열, 객체, 함수 ... → 불변성이 없다.
객체는 불변성이 없습니다.
Component를 바뀌기 위해서 Rendering을 한다.
Rendering 기준 : State 변할 때!
'JavaScript > React' 카테고리의 다른 글
실습 - 카운트 앱 (0) | 2023.06.07 |
---|---|
Component & Rendering (0) | 2023.06.07 |
JSX, Props (2) | 2023.06.04 |
React Component (0) | 2023.06.04 |
Create React App (0) | 2023.06.03 |