// children : Layout 컴포넌트를 만들 때 주로 사용
// layout 컴포넌트는 자식 컴포넌트를 가지는 형태
// const User = (props) => {
// console.log("props=>", props);
// return <div>user {props.children}</div>;
// };
// function Layout(props) {
// const children = props.children;
// return (
// <main>
// <header>header</header>
// {children}
// <footer>footer</footer>
// </main>
// );
// }
const App = () => {
// return <User abc="123">hi</User>;
// return (
// <Layout>
// <div>App</div>
// </Layout>
// );
const title = "title";
return (
<div>
<h1>test</h1>
<Todo title={title} />
</div>
);
};
export default App;
// title 값이 혹시라도 없을 경우 대비하여 초기 값 할당
const Todo = ({ title = "no" }) => {
// console.log("props=>", props);
// const { title } = props;
return (
<div>
<h3>{title}</h3>todo
</div>
);
};
// 값의 변경을 State로 만들어야 랜더링 바뀜
import { useState } from "react";
import "./App.css";
function App() {
const [name, setName] = useState("르순이");
const handleNameChange = () => {
setName("신르순");
};
return (
<div>
<h1>react state</h1>
<button onClick={handleNameChange}>신르순으로!</button>
{name}
</div>
);
}
export default App;
import React, { useState } from "react";
const App = () => {
const [text, setText] = useState("");
const handleInputChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input
type="text"
// onChange 와 value를 쌍으로 묶는게 좋음 -> 제어 컴포넌트
// value없어도 동작은 함 -> 비제어 컴포넌트
onChange={handleInputChange}
value={text}
// onChange={(event) =>
// {setText(event.target.value);}
// }
/>
<br />
{text}
</div>
);
};
export default App;
// import { useState } from "react";
// // 원시데이터 : x=1 , y=1 -> 같은 1을 참조하며 변경 시 새로운 공간 할당
// // 참조데이터 : 객체 , 배열 , 함수
// // -> 값이 같아도 다른 공간 참조 / 변경 시 공간 자체 변경
// // 리액트는 리랜더링 실행 여부를 state의 변화로 결정함.
// const App = () => {
// const [dogs, setDogs] = useState(["말티즈"]);
// const onClickHandler = () => {
// // push는 기존 값을 변경하므로 불변성을 깨뜨림
// // dogs.push("시고르");
// setDogs([...dogs, "시고르"]);
// };
// console.log(dogs);
// return (
// <div>
// <button onClick={onClickHandler}>버튼</button>
// </div>
// );
// };
// export default App;
import React, { useState } from "react";
function App() {
const [items, setItems] = useState([1, 2, 3]);
const addItem = () => {
// items.push(items.length + 1); 배열에 직접 push, 불변성 위반
setItems([...items, ++items.length]); // 상태 업데이트
};
return (
<div>
<button onClick={addItem}>Add Item</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;