[TIL] 유데미X사람인 취업 부트캠프 35일차 / netflex 만들기

[1. 오늘 배운 것]

1. profile.context.js

- intialValue로 nickname과 likedMovies배열의 초기값 설정, updateNickname과 setLikedMovies를 빈 함수로 설정

- createContext로 ProfileContext를 생성하여 전역적으로 관리

- useContext를 활용해 다른 컴포넌트에서 접근할 수 있도록 함

const initialValue = {
  nickname: "",
  updateNickname: () => {},
  likedMovies: [],
  setLikedMovies: () => {},
};

const ProfileContext = createContext(initialValue);

export const useProfile = () => useContext(ProfileContext);

- ProfileProvider : 프로필 정보를 제공하는 컨텍스트 프로바이더

- useState를 통해 nickname과 likedMovies를 관리

- updateNickname으로 닉네임 업데이트

- value 객체를 통해 하위컴포넌트에 전달

export function ProfileProvider({ children }) {
  const [nickname, setNickname] = useState("");
  const [likedMovies, setLikedMovies] = useState([]);

  const updateNickname = (newNickname) => {
    setNickname(newNickname);
  };
  const value = { nickname, updateNickname, likedMovies, setLikedMovies };

  return (
    <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
  );
}

export default ProfileContext;

 

2. LikeButton.js

- handleClickLike : 화살표함수, 객체 e 를 받음

- e.preventDefault() : 이벤트의 기본 동작을 취소/ 버튼 클릭에 의한 기본 동작인 폼 제출을 취소하여 페이지를 새로고침하지 않고 클릭 이벤트만을 처리하도록 함

- setLikedMovies((prevLikedMovies) => [...prevLikedMovies, movie]) : setLikedMovies를 호출해 배열 업데이트/ 전개 연산자 ...를 사용해 기존의 배열을 복사하고 새 요소를 추가함

- prevLikedMovies.filter((_movie) => _movie.id !== movie.id) : 필터 메서드를 사용해 좋아요 취소한 영화와 다른 아이디를 가진 영화만 남김

- const isLiked = !!likedMovies.find((likedMovie) => likedMovie.id === movie.id) : 배열에서 좋아요 누른 영화를 찾고 !!를 이용해 불린값으로 변경

import React from "react";
import { useProfile } from "../../contexts/profile.context";

function LikeButton({ movie }) {
  const { likedMovies, setLikedMovies } = useProfile();

  const handleClickLike = (e) => {
    e.preventDefault();

    setLikedMovies((prevLikedMovies) => [...prevLikedMovies, movie]);
  };

  const handleClickUnlike = (e) => {
    e.preventDefault();

    setLikedMovies((prevLikedMovies) =>
      prevLikedMovies.filter((_movie) => _movie.id !== movie.id)
    );
  };

  const isLiked = !!likedMovies.find(
    (likedMovie) => likedMovie.id === movie.id
  );

  return isLiked ? (
    <button onClick={handleClickUnlike}>좋아요 취소</button>
  ) : (
    <button onClick={handleClickLike}>좋아요</button>
  );
}

export default LikeButton;

 

[2. 회고]

!!는 불리언값으로 바꾸는 역할을 한다.......!!ㅡㄴ 불리언 값으로 바꾸는 역할을 한다...