어플리케이션이 기본 기능 (CRUD) 중 create!
//form
function Create(props) {
return (
<article>
<h2>Create</h2>
<form
onSubmit={(event) => {
event.preventDefault(); //submit event 막음
const title = event.target.title.value;
const body = event.target.body.value;
props.onCreate(title, body);
}}
>
<p>
<input type="text" name="title" placeholder="title" />
</p>
<p>
<textarea name="body" placeholder="body"></textarea>
</p>
<p>
<input type="submit" value="Create"></input>
</p>
</form>
</article>
);
}
📌 event.target.value
: event
가 발생하는 target
을 의미하는데,
여기서는 onSubmit()
이 실행 될 때 event
가 발생하는 target
은 form
이다.
📍 form
의 title
를 가져오려면 event.target.title
📍 title
의 value
까지 가져오려면 event.target.title.value
form
onSubmit()
event 실행 (onSubmit()
은 하단 <input type="submit" value="Create"></input>
의 event)input
의 vlaue
담아줌 props
로 onCreate(title, body)
넘김//app
function App() {
const [mode, setMode] = useState("welcome");
const [id, setId] = useState(null);
const [nextId, setNextId] = useState(4); // 지금 list에 있는 id의 마지막 값은 3 > 다음 값으로 사용될 값은 4
const [list, setList] = useState([
{ id: 1, title: "one", body: "body" },
{ id: 2, title: "two", body: "body" },
{ id: 2, title: "three", body: "body" },
]);
let content = null;
if (mode === "welcome") {
// 생략
} else if (mode === "READ") {
let title, body = null;
// 생략
content = <Article title={title} body={body}></Article>;
} else if (mode === "CREATE") {
content = (
<Create
onCreate={(title, body) => {
const newList = { id: nextId, title: title, body: body };
const newListCopy = [...list];
newListCopy.push(newList);
setList(newListCopy);
setMode("READ");
setId(nextId);
setNextId(nextId + 1);
}}
></Create>
);
}
return (
<div className="App">
<Header></Header>
<Nav
list={list}
onChangeMode={(id) => {
setMode("READ");
setId(id);
}}
></Nav>
{content}
<ul>
<li>
<a
href="/create"
onClick={(event) => {
event.preventDefault();
setMode("CREATE");
}}
>
Create
</a>
</li>
</ul>
</div>
);
}
다 안봐도 되고, mode === CREATE
부분만 봐도 무방하다.
PRIMITIVE는 원시값으로, string, number, boolean, undefined, bigint, symbol, null로 불변하는 값이다. 변형 할 수 없음.
Object는 범 객체로, Object, array로 처리할 때 value를 새롭게 복사 후 사용해야함
newValue = {...value} //object
newValue = [...value] //array
이렇게 생성된 newValue
로 setValue(newValue)
를 담아야 컴포넌트가 재실행!