React ToDoList

Problem

완료 도장 추가하고 싶은데 src 추가 불가

상황 파악

ToDo 에서 완료된 항목을 그저 완료 섹션으로 옮기기만 해서는 재미없으므로 좀더 할일을 완료했다는 보람을 느낄수 있도록 칭찬 스탬프를 찍기로 결정.
적절한 img를 구해서 배경 없는 png로 만들고 src 폴더 안에 넣고 해당 파일의 주소를 정확하게 적었는데도 정상적이게 이미지를 불러오지 못하고 오류가 난다.

정확히는 오류가 뜨지는 않고 그냥 이미지를 불러오지 못한채

위처럼 표시 된다.

<img src="../images/kokona_stamp.png"
     className="toDo__complete-stamp complete" />

주소는 몇번이고 확인했기에 주소를 잘못 적은 것은 아니다.

문제 해결

검색 해보니 JSX 문법으로 외부 이미지가 아닌 내부 이미지를 가져올때는 조금 다른 방법을 사용한 다는 것을 알게 되었다.

jsx 파일에 해당 이미지를 미리 import 해오고 그 과정에서 변수명도 마음대로 정할 수 있다.

import complete_stamp from "../images/kokona_stamp.png";
//              ~~~중략~~~
<img src={complete_stamp} className="toDo__complete-stamp complete" />

이런 느낌으로 원하는 내부 이미지를 JSX에 넣을 수 있다.

한가지 특이한 점은 외부 이미지를 '이미지 주소 복사' 로 가져오는 경우에는 그냥 그 주소를 그대로 넣어도 정상적으로 작동했다는 점이다.

결과적으로는 처음에 원했던 대로 완료했을때 약간의 보람을 느낄수 있는 장치를 성공적으로 추가했다.

Each child in a list should have a unique 'key'

상황 파악

대부분의 기능은 의도한 대로 동작하는데 console에 해당 에러가 발생. 사용에 지장이 없다고는 해도 콘솔창에 빨간불 들어와 있는건 견디기 힘들다.

찾아보니 리액트에서 반복해서 생성되는 여러 요소에 대해서는 나중에 렌더링을 하거나 삭제를 할때 목표 요소를 보다 정확하게 관리하기 위해 고유의 key값을 요구한다는 것을 알게 되었다.

문제 해결

 {toDos.map((item) => {
          return (
            <Todo key={item.id} item={item} toDos={toDos} setToDos={setToDos} />
          );
        })}

다음과 같이 map으로 반복 돌리는 부분에서 사용되는 Todo컴포넌트에 props로 key를 전달. 이후 해당 에러는 없어지게 되었다.

이번에 알게 된 것은 key를 엉뚱한 곳에 넣어도 의미가 없고 반복이 일어나는 장소에 넣어야 한다는 점이다. 기존에도 key 는 사용하고 있었지만 그 key를 Todo 컴포넌트 안의 div에 넣어주고 있었다. <div key={item.id} className={combinedClassName}> 이런 코드였는데 이건 이미 반복이 발생한 '결과' 에 key를 넣은 것이고, 해결방법은 반복이 실제로 발생하는 map 메서드의 return 에 넣은 것이다. 아직은 세부적인 원리까지는 정확하게 파악하지 못했지만 기억해 둘 만하다.

Vercel 첫 사용

아직 웹사이트가 완성된 것은 아니지만 작동하는 웹사이트를 배포해서 동료 평가를 받기 위해 vercel 사용을 시도.

괜히 겁먹었던 것이 무색하게 사용 자체는 대단히 쉽고 간단했다.

로그인 > 깃헙 repo 등록 > deploy 이렇게 간단한 단계만으로 성공적으로 배포할 수 있었다.
https://react-mytodo-list.vercel.app/

Github Pages 처럼 코드에 변동이 생기면 그것이 웹사이트에 별도의 조치 없이 실시간 반영되는지도 테스트 해 보았는데 훌륭하게 반영 되는것도 확인 했다.

JavaScript

Object.keys(), Object.values()

배열과 달리 객체에선 자주 쓰는 메서드가 많지 않지만 이 둘 만큼은 반드시 알아둬야 한다.

• Object.keys : key들로 이루어진 새로운 배열을 반환한다
• Object.values : value들로 이루어진 새로운 배열을 반환한다

const Values = () => {
  const fruits = {
    apple: "사과",
    banana: "바나나",
    orange: "오렌지",
  };
  const myArr = Object.values(fruits);

  return (
    <ul>
      {" "}
      {myArr.map((item, idx) => {
        return <li key={idx}>{item}</li>;
      })}
    </ul>
  );
};

const Keys = () => {
  const fruits = {
    apple: "사과",
    banana: "바나나",
    orange: "오렌지",
  };
  const myArr = Object.keys(fruits);

  return (
    <ul>
      {" "}
      {myArr.map((item, idx) => {
        return <li key={idx}>{item}</li>;
      })}
    </ul>
  );
};

위는 각각의 메서드를 이용하여 리액트 컴포넌트를 만들어 본 예시이다.