728x90
useState() : state 사용 시 state의 값을 변경할 때 사용 가능
useEffect() : state 사용 시 state의 값이 변경됐음을 감지 가능
(예시)
<body>
<div id="root"></div>
<script>
let rootElement = document.getElementById("root");
let element = <Buttons />;
const Button = ({ number, array, count, addNewArray, addCount }) => {
const clickEvent = () => {
console.log("count", count);
const newObj = {
key: count,
desc: "number " + count
};
addNewArray(array.concat(newObj));
addCount(count + 1);
};
React.useEffect(() => {
console.log("count is edited");
}, [count]);
return <button onClick={() => clickEvent()}>Button{number}</button>;
};
function Buttons() {
const [number, setNumber] = React.useState(0);
const [array, setArray] = React.useState([
{ key: 0, desc: "number 0" },
{ key: 1, desc: "number 1" },
{ key: 2, desc: "number 2" }
]);
const [count, setCount] = React.useState(3);
return (
<>
<h1>button count : {count}</h1>
{array.map((item) => (
<Button
key={item.key} // not a prop
number={item.key}
array={array}
count={count}
addNewArray={setArray}
addCount={setCount}
/>
))}
</>
);
}
ReactDOM.render(element, rootElement);
</script>
</body>
Buttons는 여러개의 버튼을 한번에 나타내는 상위 컴포넌트이다. 단일 버튼을 렌더링하는 컴포넌트 Button은 상위 컴포넌트 Buttons로부터 props인 array, count 등과 함께 이를 수정할 수 있는 setter를 함께 전달받아 그 값을 계속해서 변경될 수 있게 한다. Button 컴포넌트가 렌더링하는 button들을 클릭할 경우 발생하는 clickEvent 함수에서는 props들의 값을 변경시키는데, array의 경우에는 계속해서 새로운 배열을 만드는 것이 목표가 아니라 하나의 배열에 값을 쌓는 것이 목표였기 때문에 concat 함수를 활용하였다. Button 컴포넌트의 useEffect 함수는 props인 count의 값을 감시하여 이 값이 변경됨을 감지할 때마다 호출된다.
반응형
'Frontend > React' 카테고리의 다른 글
| React) react-router-dom을 이용한 페이지 라우팅 (0) | 2022.06.08 |
|---|---|
| React Error) sh: react-scripts: command not found (0) | 2022.06.05 |
| React) 불변성, State의 가장 큰 특징 (0) | 2022.05.27 |
| React) state란? setState와 useState를 사용해 state 변경하기, props와의 차이 (0) | 2021.11.13 |
| React) props란? (0) | 2021.11.11 |
