react js 과제 리팩토링(?)

이상하게 찾던거 find 메서드로 대체

  let id = 0;
  authors[Number(authorId) - 1].books.map((item) =>
    item.name === book ? (id = item.id) : null
  );

아래처럼 바꿈

  var id = authors[Number(authorId) - 1].books.find(
  (item) => item.name === book
).id;

계속이랬음

let id = 0;
authors.map((author) => (author.name === name ? (id = author.id) : null));

const navigate = useNavigate();
const onHomeClick = () => {
  navigate("/");
};
const onAboutClick = () => {
  navigate("/about");
};
<ul style={{ listStyle: "none" }}>
      <li>
      
        <button onClick={onHomeClick}>Home</button>
      </li>
      <li>
        <button onClick={onAboutClick}>About</button>
      </li>
    </ul>

아래처럼 그냥 Link로 통일함(navigate써보고싶어서 써보긴했었는데 흠좀무

import { Link } from "react-router-dom";
function Header() {
  return (
    <div>
      <Link to={"Home"}>Home</Link>
      <br />
      <Link to={"About"}>About</Link>
    </div>
  );
}
export default Header;

---

디자인용 폴더를 따로 만들었다. prop에 대해 조금 이해가 가는 것 같기도 해서 행복했다. 이렇게 전달해주면 되는 구나! 사실 구조가 비슷해서, 데이터를 떤져주고 더 축약해서 jsx코드들을 컴포넌트화 할수있을 것 같은데 (예를들어 prop으로 데이터를 받게하고 컴포넌트화 된 jsx 안에서 map을 돌리는 등..) 오늘은 여기까지...

---

폴더구조를 정리했다. 불필요한 jsx코드도 정리하면서..

---

undefinedCathc라는 string이 undefined 이거나 null일때 true / false를 반환하는 코드를 작성해서 Author.js와 Book.js 에 if else구문으로 돌려주었다. id가 없으면 이제 안내문구가 나온다

---

재미삼아 db를 새로 고쳐보았다

---

D 님의 db구조

 {
    id: "J._K._Rowling",
    name: "J.K.Rowling",
    books: [
      {
        id: "Harry_Potter_I",
        name: "Harry Potter I",
        chapters: [
          "Chapter I",
          "Chapter II",
          "Chapter III",
          "Chapter IV",
          "Chapter V"
        ],
        characters: ["Good guy A", "Good guy B", "Bad guy A", "Bad guy B"]
      },

S 님 DB구조

 {
    "author": "J.R.R Tolkien",
    "book": [
      {
        "name": "The Load of the Ring",
        "chapters": ["Chapter 1", "Chapter 2", "Chapter 3"],
        "characters": [
          "ring guy",
          "ring guy friend",
          "eye",
        ]
      },

내 DB구조

 {
    id: 1,
    name: "J.k Lolling",
    books: [
      {
        id: 1,
        name: "harry potter 1",
        chapters: [
          { name: "chapter1" },
          { name: "chapter2" },
          { name: "chapter3" },
          { name: "chapter4" }
        ],
        characters: [{ name: "harry" }, { name: "Ron" }, { name: "Hermianone" }]
      },

굳이 chapters와 characters를 object어레이 구조로 할필요 없었음..!(찾아줄 필요없었음)