1주차 과제 - 좋아요/즐겨찾기(4)

4. 좋아요, 즐겨찾기 기능 구현

✅ 게시물에 좋아요❤, 즐겨찾기⭐ 버튼을 만든다.
✅ 좋아요 버튼을 클릭하면 숫자가 1 올라가야 한다.
✅ 즐겨찾기 버튼을 클릭하면 즐겨찾기 버튼이 강조되고, 강조된 버튼을 다시 클릭하면 강조가 취소되어야 한다.

 

+ 좋아요를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다.

+ 즐겨찾기를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다.

---

✅ 게시물에 좋아요❤, 즐겨찾기⭐ 버튼을 만든다.

[좋아요]

✅ 좋아요 버튼을 클릭하면 숫자가 1 올라가야 한다.

 <div className="good">
                    <FaRegThumbsUp
                      onClick={() => {
                        goodBtn(index);
                      }}
                    />
                    <span className="goodCount">
                      {props.posting[index].good}
                    </span>
                  </div>

1. App -> posting state에 good을 추가한다.

 let [posting, setPosting] = useState([
    {
      id: 0,
      title: "첫 게시물 제목",
      content: "내용",
      good: "0" // 좋아요기능
    },
  ]);

2. view -> posting state를 전달

<View posting={posting} setPosting={setPosting} />

3. view -> 좋아요 누를때마다 증가하는 goodBtn 함수 생성

 const goodBtn = (index) => {
    let copy = [...props.posting];
    copy[index].good++;
    props.setPosting(copy);
  };

1) 원본 유지를 위해서 posting 을 copy에 복사

2) posting의 index번째의 good을 증가

3) 변경된 posting을 setPosting에 넣어준다.

---

[즐겨찾기]

✅ 즐겨찾기 버튼을 클릭하면 즐겨찾기 버튼이 강조되고, 강조된 버튼을 다시 클릭하면 강조가 취소되어야 한다.

   <div className="find">
                    <FaRegStar
                      className={`checkStar ${a.isOn === true ? "on" : null}`}
                      onClick={() => {
                        checkStarBtn(a.id);
                      }}
                    />
                  </div>

isOn이 true 일때 class에 on 부착!

 

1. App -> posting state에 isOn을 추가한다.

 let [posting, setPosting] = useState([
    {
      id: 0,
      title: "첫 게시물 제목",
      content: "내용",
      good: "0",
      isOn: false // 즐겨찾기 기능
    },
  ]);

2. view -> posting state를 전달 (좋아요와 동일)

3. view ->  즐겨찾기 누를때마다 on이 붙는 checkStarBtn 함수 생성

const checkStarBtn = (a) => {
    let copy = [...props.posting];
    const mathId = copy.find((el) => el.id === a);

    mathId.isOn = !mathId.isOn;
    
    props.setPosting(copy);
  };

 

1) 좋아요 동일하게 깊은복사

2) 배열 중 a와 동일한 id값을 찾아 변수에 저장 (선택한 즐겨찾기에 true시키려고)

3) isOn반전시키기(true->false/ false->true)

4) 변경된 데이터 다시 저장