[웹 FE 스터디] React : Creat~Delete

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 40기_강한림

작성 참고 및 강의 : 생활코딩 - WEB - React

---

지난 강의에서 이어지는 내용입니다. 

 

 

9. 수정기능 (Update)

 

Update = creat + read 

Creat아래에 Update 할 수 있는 링크를 추가한다. (ul - li 태그를 사용한다.)

 

------------------------  수업에 들어가기 앞서 여러 자잘한 기능들을 추가합니다 -----------------------

 

Update가 상세보기 페이지로 들어갔을때만 보이게 하자.

 

let contextControl = null;

mode가 read 일때 나타나야하므로

if (mode === 'READ') {

// 기존의 코드들//

content = <Article title={title} body={body}></Article>
contextControl = <li><a href = "/update" + id> Update </a></li>} // id값을 추가했다.

이후 Creat 태그 아래에 아래의 {contextControl}을 입력한다.

{contextControl}

 

Update의 기본적인 내용들을 추가한다.

contextControl = <li><a href = "/update" + id onClick = {event =>{
event.preventDefault();
setMode('UPDATE');
}> Update </a></li>}

 

 

본격적인 Update 기능을 만듭니다.

 

else if(mode === 'UPDATE'){
content = <Update></Update> // Update 컴포넌트가 실행되도록 한다.
}

 

function Update(props){ //Creat와 거의 동일하다.
	return <article>
    <h2>Create</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(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>
}

// 미완성 상태입니다. 수업이 진행되면서 수정/완성됩니다.

 

onUpdate속성을 추가합니다. 

else if(mode === 'UPDATE'){
	content = <Update onUpdate={(title, body)=> {


}}></Update> 
}

 

function Update를 수정합니다.

function Update(props){ //Creat와 거의 동일하다.
	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title"/></p>
      <p><textarea name="body" placeholder="body"></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

 

Update는 수정기능이기 때문에, form에는 기존의 내용(수정되어야 할 내용)이 담겨있어야 합니다.

- > Update 컴포넌트가 기존의 내용을 가져와야 합니다.

- > Update 컴포넌트가 title과 body의 값을 기본적으로 가지고 있어야 합니다.

 

else if(mode === 'UPDATE'){
	let title, body = null;
    for (let i = 0; i<topics.length; i++){
	if(topics[i].id === id){
    	title = topics[i].title;
        body = topics[i].body;
        }
    }
	content = <Update title ={title} body = {body} onUpdate={(title, body)=> {


}}></Update> 
}

founction Update에서, props를 통해서 들어온 값을 title에 value값으로 줍니다.

body또한 동일하게 해줍니다.

function Update(props){
	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value = {props.title}/></p>
      <p><textarea name="body" placeholder="body" value = {props.body}></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

 

react에서 props값은 외부자(사용자)가 내부자에게 전달하는 값.

state는 내부자가 사용하는 값(데이터) 임을 다시 상기시킵니다.

 

props를 state로 바꿉니다.

function Update(props){
	const [title, setTitle] = useState(props.title);
   	const [body, setBody] = useState(props.body);

	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value = {title}/></p>
      <p><textarea name="body" placeholder="body" value = {body}></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

 

입력을 시도할때, 입력을 받을 수 있도록 / 입력하면 값이 변하도록 합니다.

 

function Update(props){
	const [title, setTitle] = useState(props.title);
   	const [body, setBody] = useState(props.body);

	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value = {title} onChange={event=>{
      	console.log(event.target.value);
      }
      /></p>
      <p><textarea name="body" placeholder="body" value = {body}></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

react에서는 값을 입력할 때마다 onChange={}가 호출됩니다.

(html에서는 커서가 밖으로 빠져나갔을때, 호출되었습니다.)

 

console.log(event.target.value)

- 호출하게한 태그를 찾습니다 : .target

 

방금 입력되어 바뀐 값을 새로운 state로 바꾸어 줍니다.

 

function Update(props){
	const [title, setTitle] = useState(props.title);
   	const [body, setBody] = useState(props.body);

	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value = {title} onChange={event=>{
      	console.log(event.target.value);
        setTitel.log(event.target.value);
      }
      /></p>
      <p><textarea name="body" placeholder="body" value = {body}></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

 

setTitle.log(event.target.value);

- 가장 최근에 변경된 값을 새로운 title값으로 바꿉니다.

 

중간 정리

: props로 들어온 'title'값을 state로 바꾸어줍니다.

- > 그 state를 value=(title)을 통해 value값으로 줍니다.

- > state는 컴포넌트 안에서 변경할 수 있습니다.

- > onChange에서 새로운 value로 키워드를 입력할 때마다, setTitle 값을 정해줍니다.

- > 그때마다 'title'의 값이 바뀌고, 컴포넌트가 다시 실행됩니다.

- > 컴포넌트가 다시 실행되면, value의 title값을 바뀌게 되고, 이것이 반복됩니다.

 

body 또한 동일하게 수정합니다.

 

function Update(props){
	const [title, setTitle] = useState(props.title);
   	const [body, setBody] = useState(props.body);

	return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value = {title} onChange={event=>{
        setTitel.log(event.target.value);
      }
      /></p>
      <p><textarea name="body" placeholder="body" value = {body} onChange={event =>{
      	setBody(event.target.value);
      }></textarea></p>
      <p><input type="submit" value="Update"></input></p>
    </form>
  </article>
}

 

이후 Update 버튼을 클릭하면, onSubmit가 호출되면서, title과 body의 값을 onUpdate로 전달합니다.

 

onUpdate에 수정된 값이 들어오도록 해줍니다.

else if(mode === 'UPDATE'){
	let title, body = null;
    for (let i = 0; i<topics.length; i++){
	if(topics[i].id === id){
    	title = topics[i].title;
        body = topics[i].body;
        }
    }
	content = <Update title ={title} body = {body} onUpdate={(title, body)=> {
	console.log(title, body);
}}></Update> 
}

 

이 수정된 값들이 topics(본문)에 전달되도록 합니다.

topics는 객체/배열임을 주의합니다.

else if(mode === 'UPDATE'){
	let title, body = null;
    for (let i = 0; i<topics.length; i++){
	if(topics[i].id === id){
    	title = topics[i].title;
        body = topics[i].body;
        }
    }
	content = <Update title ={title} body = {body} onUpdate={(title, body)=> {
	console.log(title, body);
    const newTopics = [...topics]
    const updatedTopic = {id:id, title:title, body:body}
}}></Update> 
}

topics에서 id가 같은것을 찾는과정도 추가합니다.

else if(mode === 'UPDATE'){
	let title, body = null;
    for (let i = 0; i<topics.length; i++){
	if(topics[i].id === id){
    	title = topics[i].title;
        body = topics[i].body;
        }
    }
	content = <Update title ={title} body = {body} onUpdate={(title, body)=> {
	console.log(title, body);
    const newTopics = [...topics]
    const updatedTopic = {id:id, title:title, body:body}
    for(let i = 0; i<newTopics.length; i++){
    if(newTopics[i].id === id){
    	newTopics[i] = updateTopic;
        break;
    }
    setTopics(newTopics);
}}></Update> 
}

상세보기 페이지로 이동하게 합니다.

else if(mode === 'UPDATE'){
	let title, body = null;
    for (let i = 0; i<topics.length; i++){
	if(topics[i].id === id){
    	title = topics[i].title;
        body = topics[i].body;
        }
    }
	content = <Update title ={title} body = {body} onUpdate={(title, body)=> {
	console.log(title, body);
    const newTopics = [...topics]
    const updatedTopic = {id:id, title:title, body:body}
    for(let i = 0; i<newTopics.length; i++){
    if(newTopics[i].id === id){
    	newTopics[i] = updateTopic;
        break;
    }
    setTopics(newTopics);
    setMode('READ');
}}></Update> 
}

 

 

10. Delete

 

Update 버튼 아래에 Delete 버튼을 만들도록 합니다.

Delete는 삭제를 위한 것이기에, 페이지로 이동할 필요가 없어 button으로 만듭니다

 

<> 빈 태그를 만들어 Update와 나누어준뒤 생성하도록 합니다.

 

<li><input type="button" value = "Delete" onClick={()=> {
	
}} /><li>

삭제해야할 데이터는 'topics'입니다.

<li><input type="button" value = "Delete" onClick={()=> {
	const newTopics = []
    for(let i=0; i<topics.length;i++){
    	if(topics[i].id !== id{
    		newTopics.push(topics[i]);
    	}
    }
    setTopics(newTopics);
}} /><li>

 

 

마무리 합니다.

 

<li><input type="button" value = "Delete" onClick={()=> {
	const newTopics = []
    for(let i=0; i<topics.length;i++){
    	if(topics[i].id !== id{
    		newTopics.push(topics[i]);
    	}
    }
    setTopics(newTopics);
    setMode('WELCOME');
}} /><li>