생활코딩 react강의 5장
Create
기존 페이지에서 create버튼으로 내용을 추가하면 기존 객체배열이 추가되게끔 해보자.
적용할 것
1) Create를 누르면 mode가 CREATE로 바뀐다.
Create링크에 onClick이벤트를 설정하고, 링크를 눌렀을 때 새로고침이 일어나지 않게 preventDefault()를 써주고, setMode('CREATE')를 써서 mode변경이 되게끔 한다.
// App컴포넌트
return (
...
<a href="/create" onClick={event=>{
event.preventDefault();
setMode('CREATE');
}}>Create</a>
)
2) Create에 해당되는 UI가 나타난다.
이미 선언해놓았던 if문에 mode가 'CREATE'일 경우, content가 Create컴포넌트 내용으로 변경되도록 선언하자.
// App컴포넌트
else if (mode === 'CREATE') {
content = <Create></Create>
}
3) Create컴포넌트에 form태그를 써서 변경할 내용을 입력할 form을 만든다.
// Create컴포넌트
function Create(){
return <article>
<h2>Create</h2>
<form>
<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>
}
4) 2)에서 만든 if문의 Create태그에 onCreate라는 임의의 속성을 지정하고, title과 body를 매개변수로 받는 함수를 작성한다.
그리고 Create컴포넌트에 form태그에 onSubmit이벤트를 생성하고, 새로고침이 일어나지 않게 preventDefault()를 쓰고, 클릭했을 때 form에 기록된 내용을 가지고 올 수 있게끔 상수 title과 body를 선언한 후에, App컴포넌트의 Create태그 onCreate속성으로 값을 보내기 위해 매개변수 props를 선언하고, props를 써서 title과 body를 보낸다.
// Create컴포넌트
function Create(props){
return <article>
<h2>Create</h2>
<form onSubmit={event=>{
event.preventDefault();
const title = event.target.title.value;
const body = event.target.body.value;
props.onCreate(title, body);
}}>
...
// App컴포넌트
else if (mode === 'CREATE') {
content = <Create onCreate={(_title, _body)=>{
}}></Create>
}
5) topics객체배열에 Create로 작성한 내용을 추가하기 위해 topics를 useState로 승격시킨다. Create태그의 onCreate속성 함수에 새로운 상수를 선언한 후에 topics객체와 형식이 맞게 title과 body 키값을 선언하고, 매개변수인 _title과 _body를 받아오게끔 적어준다. 그리고 id값을 별도로 관리하기 위해 useState를 선언해준다. 그리고 지금 객체배열에 id가 3까지 있으니 초기값을 4로 지정해준다. 그런 다음 newTopic상수에 id값을 방금 만든 state로 지정해준다.
// App컴포넌트
...
const [nextId, setNextId] = useState(4);
...
else if (mode === 'CREATE') {
content = <Create onCreate={(_title, _body)=>{
const newTopic = {id: nextId, title:_title, body:_body}
}}></Create>
}
그럼 topics에 newTopic를 추가하려면 어떻게 해야할까?
const [value, setValue] = useState(PRIMITIVE);
PRIMITIVE : string, number, bigint, boolean, undefined, symbol, null
위와 같은 상황이라면 그냥 추가해도 무방하다. 하지만, 객체라면 말이 달라진다.
const [value, setValue] = useState(Object);
Object : object, array
객체일 경우에는 새로운 변수를 선언하여 거기에 value값을 복제해야한다. 객체값을 복제해오려면 '...'선택자를 사용하여 가져온다. 그리고 setValue에 새로운 변수를 지정하면 그제서야 컴포넌트가 다시 실행된다.
newValue = {...value};
setValue(newValue);
6) 위와 같은 방법으로 topics배열에 newTopic를 추가해보자.
// App컴포넌트
...
else if (mode === 'CREATE') {
content = <Create onCreate={(_title, _body)=>{
const newTopic = {id: nextId, title:_title, body:_body}
const newTopics = [...topics]
newTopics.push(newTopic);
setTopics(newTopics);
}}></Create>
}
7) 추가 후에 form이 사라지고 우리가 새로 추가한 데이터를 바로 볼 수 있게 바꾸려면 어떻게 해야할까? mode를 READ로 바꾸고, id를 nextID로 지정, NextId를 지금 값+1을 해주면 잘 실행이 되는 걸 볼 수 있다.
// App컴포넌트
...
else if (mode === 'CREATE') {
content = <Create onCreate={(_title, _body)=>{
const newTopic = {id: nextId, title:_title, body:_body}
const newTopics = [...topics]
newTopics.push(newTopic);
setTopics(newTopics);
setMode('READ');
setId(nextId);
setNextId(nextId+1);
}}></Create>
}
Author And Source
이 문제에 관하여(생활코딩 react강의 5장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@saiani1/생활코딩-react강의-create저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)