[react] state

📌state

📌 props, state 차이점

"prop과 state 모두 이 값이 변경되면 새로운 리턴값을 바꾸어서 UI를 바꿉니다. 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한 데이터고, state는 컴포넌트를 만드는 내부자를 위한 데이터라는 것입니다."

📌 useState()

> "배열을 return하고, 배열의 0번째 데이터는 상태의 값을 읽을 때 쓰는 데이터,
1번째 데이터는 그 상태의 값을 변경할 떄 쓰는 함수입니다."

 /*const _mode = useState("welcome");
  const mode = _mode[0];
  const setMode = _mode[1];*/
// 위 세줄의 축약형 
 const [mode, setMode] = useState("welcome");

📍 초기 셋팅 > import { useState } from "react"; 사용할 파일 상단에 import
📍 const [dataName, 해당Data의 값을 변경하는 함수] = useState("dataName의 초기값");
📍 값을 변경 할 때는 useState() 의 두번째 값(함수)을 사용해야 함

00 내가 클릭할 때 이벤트가 일어나서 뭔가가 바뀌게 해주세요?

nav를 눌렀을 때 내용이 변경되게 하는 것

function Nav(props) {
  const array = [];
  for (let i = 0; i < props.list.length; i++) {
    let li = props.list[i];
    array.push(
      <li key={li.id}>
        <a
          id={li.id}
          href={"/read/" + li.id}
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode(Number(e.target.id)); 
            // 해당 id 값은 str으로 들어오기 때문에 하단 setMode에서 사용하려면 Number로 바꿔줘야합니다.
          }}
        >
          {li.title}
        </a>
        <p>{li.body}</p>
      </li>
    );
  }

// app
function App() {
  const list = [
    { id: 1, title: "one", body: "첫번째 메뉴를 누르면 나오면 페이지" },
    { id: 2, title: "two", body: "두번째 메뉴를 누르면 나오는 페이지" },
    { id: 3, title: "three", body: "세번째 메뉴를 누르면 나오는 페이지" },
  ];
  const [mode, setMode] = useState("welcome");
  const [id, setId] = useState(null);
  let content = null; // 기존 content 값 초기화
  if (mode === "welcome") {
    content = (
      <Article article="Welcome" body="header 누르면 나오는 페이지야"></Article>
    );
  } else if (mode === "read") {
    let title,
      body = null; // 해당 title,  body 초기화
    for (let i = 0; i < list.length; i++) {
      if (list[i].id === id) {
        title = list[i].title; 
        body = list[i].body;
      }
    }
    content = <Article article={title} body={body}></Article>;
  }
  return (
    <div className="App">
      <Header
        title="title 변경해볼게" 
        onChangeMode={() => {
          setMode("welcome"); // setMode가 눌리면 변경되는 데이터 
        }}
      ></Header>
      <Nav
        list={list}
        onChangeMode={(id) => {
          setMode("read");
          setId(id); //id 값에 맞춰 변경됨 위 if문 확인
        }}
      ></Nav>
      {content} // 버튼을 눌렀을 때 body의 내용이 담기는 부분
    </div>
  );
}