[20.11.09 phone-book-v2]useEffect함수, 애니메이션 미디어쿼리 웹접근성, CRUD 구현

 

map을 이용해서 인덱스를 이용하고자 할 때

key라는 값이 반드시 존재해야한다!!

>> PhoneList.jsx

---

화면이 자주바뀌고 깜빡이는 현상은 웹 접근성에 위배 되기 때문에 미디어쿼리 넣어줌

애니메이션 변화하는걸 줄이는 부분

>> App.css

---

  useEffect(() => {
    // 추가된 데이터가 있으면 전체 phoneBooks를 브라우저의 localStorage에 저장
    // 1. 배열 데이터를 문자열화 시키기
    const stringPhoneBook = JSON.stringify(phoneBooks);
    // 2. localStorage에 phoneBooks라는 이름으로 저장하기
    window.localStorage.setItem("phoneBooks", stringPhoneBook);
  }, [phoneBooks]);

  /**
   * Effect의 두번째 파라메터를 빈값([])으로 설정을 하면
   * 프로젝트가 시작될 때(화면이 rendering될 때) 한번만 이벤트가 작동된다.
   */
  useEffect(() => {
    const localStorageBooks = window.localStorage.getItem("phoneBooks");
    setPhoneBooks(JSON.parse(localStorageBooks));
  }, []);

>> PhoneMain.jsx

>> PhoneMain.jsx

---

  const phoneList = phoneBooks.map((phone, index) => {

    if (phone.isEdit) {

      // true이면 (헷갈리면 main확인)

      return (

        <tr

          key={phone.id}

          onClick={trOnClick}

          data-id={phone.id}

          data-name={phone.name}

        >

          <td>{index + 1}</td>

          <td>

            <input value={phone.name} />

          </td>

          <td>

            <input value={phone.number} />

          </td>

          <td className="update-ok">&#10003;</td>

        </tr>

      );

    } else {

      // false이면

      return (

        <tr

          key={phone.id}

          onClick={trOnClick}

          data-id={phone.id}

          data-name={phone.name}

        >

          <td>{index + 1}</td>

          <td>{phone.name}</td>

          <td>{phone.number}</td>

          <td className="delete">&times;</td>

        </tr>

      );

    }

  });

클릭한 친구는 true가 되면서 인풋박스로 변경

>> PhoneList.jsx

---

모든 함수들은 메인에서 관리하고 받아서 사용하는 거는 다른 컴포넌트에서 사용한다.