• 애플리케이션 구조 : create 생성, read 읽기, update 수정, delete 삭제

• input 태그의 value값에 props.title, props.body 를 주었을 때 변경이 안되는 이유:

  (props 데이터 : 사용자가 컴포넌트로 전달한 명령)

  input 태그에 입력한 값이 props의 title or body 값을 변경 하는 게 아님.

  ⇒ 해결책 : props를 state로 환승

• props : 외부자가 내부로 전달하는 값

• state : 내부자가 사용하는 값

• event 함수 안에서 트리거한 태그를 찾는 것 : target

• target의 값 : value

✔️input 태그 입력 시 값이 바뀌게 하는 방법 (input 값 변경 안되는 이유)

1. props로 들어온 값을 state로 환승
2. input의 value값으로 환승한 state를 줌(state는 컴포넌트 안에서 변경 가능)
3. onChange를 이용해새로운 value로 키워드를 입력할 때 마다 state를 변경해줌 (setValue)

⇒ 값이 바뀌고 컴포넌트가 다시 렌더링되면서 새로운 값이 들어오고 저장 되는 것을 반복함

import {useState} from 'react'; // useState 훅 이용 (react에서 제공하는 기본적인 함수)

function Header(props){
  console.log("props : " , props, props.title)
  return <header>
    <h1><a href='/' onClick={(event)=>{
      event.preventDefault(); // 리로드 방지
      props.onChangeMode(); // Header 태그에 작성한 이벤트 호출
    }}>{props.title}</a></h1>
</header>
}

function Nav(props){
  const lis = []
  for(let i=0; i<props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault(); // 리로드 방지
        props.onChangeMode(Number(event.target.id));  // Nav 태그에 작성한 이벤트 호출, event.target.id는 문자열
        // event.target : 이벤트를 유발시킨 태그 = a 태그
      }}>{t.title}</a>
      </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function Create(props){
  return <article>
    <h2>Create</h2>
    <form onSubmit={event=>{
      event.preventDefault(); // submit 됐을 때 reload 방지
      const title = event.target.title.value;  // event.target == form 태그
      const body = event.target.body.value;  // event.target == form 태그
      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"/></p>
    </form>
  </article>
}
function Update(props){
  const [title, setTitle] = useState(props.title);  // props.title을 state로 환승
  const [body, setBody] = useState(props.body); // props.body를 state로 환승
  return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault(); // submit 됐을 때 reload 방지
      const title = event.target.title.value;  // event.target == form 태그
      const body = event.target.body.value;  // event.target == form 태그
      props.onUpdate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title" value={title} onChange={event=>{
          setTitle(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"/></p>
    </form>
  </article>
}

function App() {
  // const _mode = useState('WELCOME'); // 지역변수를 state로 업그레이드. 초기값: WELCOME 
  // const mode = _mode[0];  // state의 초기 값
  // const setMode = _mode[1]; // state를 바꿀 때 사용
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [topics, setTopics] = useState([
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'},
  ]);
  let content = null;
  let contextControl = null;
  if(mode === "WELCOME"){
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  } else if(mode === "READ"){
    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 = <Article title={title} body={body}></Article>
    contextControl = <li><a href={'/update/'+id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a></li>
  } else if(mode === 'CREATE'){
    content = <Create onCreate={(_title, _body)=>{
      const newTopic = {id:nextId, title:_title, body:_body};
      const newTopics = [...topics] // topics 배열 복제
      newTopics.push(newTopic); // 복제본 변경
      setTopics(newTopics); // 컴포넌트 다시 실행
      setMode('READ');
      setId(nextId);
      setNextId(nextId+1);
    }}></Create>
  } 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)=>{
      const newTopics = [...topics] // topics 배열 복제
      const updatedTopic = {id:id ,title:title, body:body}  // mode === "READ" 가 실행된 상태이므로 id값은 id state를 사용해주면됨

      for(let i=0; i<newTopics.length; i++){
        if(newTopics[i].id === id){
          newTopics[i] = updatedTopic;
          break;
        }
      }
      setTopics(newTopics);
      setMode('READ');
    }}></Update>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('WELCOME'); // state인 mode 값 변경
      }}></Header>
      <Nav topics = {topics} onChangeMode={(_id)=>{
        setMode('READ'); // state인 mode 값 변경
        setId(_id); // state인 id 값 변경
      }}></Nav>
      {content}
      <ul>
        <li><a href='/create' onClick={event=>{
          event.preventDefault();
          setMode('CREATE');
        }}>Create</a></li>
        {contextControl}
      </ul>
    </div>
  );
}

출처 : 생활 코딩 - https://youtu.be/AoMv0SIjZL8