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

✔️상태를 다룰 때, 상태가 객체와 같이 복합적인 데이터인 경우 처리해야 할 지침

A. 상태의 데이터가 원시 데이터(PRIMITIVE) 타입인 경우

; string, number, bigint, boolean, undefined, symbol, null

const [value, setValue] = useState(PRIMITIVE);

⇒ 하던 방식 그대로 상태 만듦.

B. 범객체(Object) 일 경우 (복합적인 데이터)

; object, array

const [value, setValue] = useState(Object);

⇒ 데이터를 복제 해야 함

1. newValue = {...value} // value 값을 복제한 새로운 데이터 (오리지널 데이터 복제)

   → 배열일 경우 newValue = [..value]

2. newValue 변경 // 복제본을 변경함

3. setValue(newValue) // 리액트가 오리지널 컴포넌트의 데이터와 새로 들어온 복제본을 비교해 다르면 컴포넌트 다시 실행

• 리액트는 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 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;
  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>
  } 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>
  }
  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}
      <a href='/create' onClick={event=>{
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>
  );
}

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