import React, { useState } from 'react';
const Counter = () => {
const [value,setValue] = useState(0);
return (
<div>
<p>현재 카운터 값은 <b>{value}</b>입니다.</p>
<button onClick={() => setValue(value+1)}>+1</button>
<button onClick={() => setValue(value-1)}>-1</button>
</div>
);
};
export default Counter;
useState 함수의 파라미터에는 상태의 기본값을 넣어준다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미이다. 이 함수가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다. 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리랜더링 된다.
import React, { useState } from 'react';
const Info = () => {
const [name, setName] = useState('');
const [nickname,setNickname] = useState('');
const onChangeName = e => {
setName(e.target.value);
}
const onChangeNickname = e =>{
setNickname(e.target.value)
}
return (
<div>
<div>
<input value={name} onChange={onChangeName}type="text" />
<input value={nickname} onChange={onChangeNickname}type="text" />
</div>
<div>
<b>이름:</b>{name}
</div>
<div>
<b>닉네임:</b>{nickname}
</div>
</div>
);
};
export default Info;
...
useEffect(() => {
console.log('렌더링이 완료되었습니다!')
console.log({
name,
nickname
});
})
...
useEffect(() => {
console.log('렌더링이 완료되었습니다!')
console.log({
name,
nickname
});
},[name])
useEffect(() => {
console.log('렌더링이 완료되었습니다!')
console.log({
name,
nickname
});
return () =>{
console.log('cleanup');
console.log(name);
}
},[name])