생활코딩 React 2022 8강 정리

글을 생성하고, Form을 어떻게 다루는가?

CREATE

  • setMode(‘CREATE’); : mode를 create로 변환시키기.
  • 사용자가 입력한 값을 가져올 수 있는 코드 form태그에 주목하기.
<form onSubmit=(event=>{event.preventDefault(); 
const title = event.target.title.value;
<input type="text" name="title" placeholder="title"> </input>
<input type="submit" value="Create"></input> 
</form>
  • 사용자가 입력한 값을 화면에 출력할 수 있는 코드
const [value, setValue] = useState(PRIMTIVE);

//단순 글자가 아닌 배열일 때
const newTopics = [...topics]
//배열의 복제
newTopics.push(newTopic);
setTopics(topics);

생활코딩 React 2022 9강 정리

UPDATE = CREATE + READ

UPDATE

  • setMode(‘UPDATE’);
  • create 코드와 유사하다.
  • 기존의 내용을 가지고 있기 위해서…read의 코드와 유사하다.
  • 수정이 가능하도록 돕기 위해서…prop을 state로 환승하는 것이 필요하다.
const [title, setTitle] = userState(props.title);

//...UPDATE 함수에 본격적으로 state 상태로 변경
<input type="text" name="title" placeholder="title" value={title} onChange={event=>{console.log(event.target.value); setTitle(event.target.value);}}

생활코딩 React 2022 10강 정리

DELETE 버튼 만들기

DELETE

<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]);
     }
}