[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. 회고]
!!는 불리언값으로 바꾸는 역할을 한다.......!!ㅡㄴ 불리언 값으로 바꾸는 역할을 한다...