useState, useEffect, useContext 간단하게 정리하기
useState
- 컴포넌트에 상태값(state)을 추가할 때 사용하는 hook
- (상태값, 상태값 변경 함수(set))
useEffect
- (함수, 의존성 배열)
- 배열이 변경 되는 경우에만 실행 된다. (vue의 computed같은 역할)
- 의존성 배열 주지 않는 경우 컴포넌트가 렌더링 할 때 마다 실행이 된다.
- 빈배열[] 을 주는 경우 첫 렌더링에만 실행한다.
useContext
- React.createContext(기본값) => {Provider, Consumer}
- 상위 컴포넌트에서 Provider 컴포넌트를 이용해서 데이터를 전달
useContext 예시
// favorite-context.js
import {createContext, useState} from 'react';
const FavoritesContext = createContext({
favorites : [],
toatalFavorites : 0,
addFavorite : (favoriteMeetup)=>{},
removeFavorite : (meetupId)=>{},
ItemIsFavorite : (meetupId)=>{},
}); //context생성(초기값)
export function FavoritesContextProvider(props){ //값을 받으려 하는 모든 컴포넌트에 context전달, context값 업데이트할 수 있음.
const [userFavorites, setUserFavorites] = useState([]);
function addFavoriteHandler(favortieMeetup){
// setUserFavorites(userFavorites.concat(favoriteMeetup)) //concat : 추가해서 새 배열 변환
// 리액트가 스테이트 업데이트 즉시 하지않고 예약을 걸어둔다.
// 그래서 이렇게 하면 state를 업데이트 할 때 최신 상태 업데이트를 반영하지 못할 수 있어서, 상태 업데이트 함수를 대신 호출하는게 낫다.
setUserFavorites((prevUserFavorites)=>{ //함수를 바로 실행, 이전 상태 스냅샷을자동으로 받아옴 (prevUser...)
return prevUserFavorites.concat(favortieMeetup) //최신상태 바로 받아올수있음. 정확한 순서대로 실행되기 때문에!
})
}
function removeFavoriteHandler(meetupId) {
setUserFavorites(prevUserFavorites => {
return prevUserFavorites.filter(meetup => meetup.id !==meetupId)
})
}
function itemIsFavoriteHandler(meetupId) {
return userFavorites.some(meetup => meetup.id=== meetupId);
}
const context = {
favorites : userFavorites,
toatalFavorites : userFavorites.length,
addFavorite : addFavoriteHandler,
removeFavorite : removeFavoriteHandler,
itemIsFavorite : itemIsFavoriteHandler
};
return <FavoritesContext.Provider value={context}>
{props.children}
</FavoritesContext.Provider> //provider:해당 context와 상호작용하는 모든 컴포넌트 포함해야함
}
export default FavoritesContext;
- context 생성 (비어있는 즐겨찾기, 즐겨찾기 수, 비어있는 함수들) : FavoritesContext
- useState으로 즐겨찾기 상태와 즐겨찾기 set 요소를 만든다.
- addFavoriteHandler 같은 함수를 이용해서 즐겨찾기 state를 변경해 준다. (state set을 이용해서 변경한다.)
- 변경한 state를 이용해서 context에 새로 넣어줄 데이터를 만든다.
- 생성했던 context (FavoritesContext) 의 Provider 으로 context를 넘겨주는데 이때 value로 새로 만든 데이터를 넣어준다. 이 태그로 props.children을 감싸면 props.children에 모두 이 변경된 context가 반영된다.
//index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import { FavoritesContextProvider } from "./store/favorite-context";
ReactDOM.render(
<FavoritesContextProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</FavoritesContextProvider>,
document.getElementById("root")
);
- index.js에서 위에서 만든 ContextProvider을 가져온다. 이때 기본값으로 보냈던 context가 아니라 컴포넌트 함수를 가져오기 위해 그 이름으로 import 한다. {FavoritesContextProvider}
- 렌더링할때, BrowserRouter 요소와 그 하위를 FavoritesContextProvider으로 감싸준다. 그렇게 되면 렌더링 되는 것들이 FavoritesContextProvider의 props.children이 되고, 위에서 props.children에 context가 변경되면 반영될 수 있도록 코드를 짯기 때문에 context를 이용할 수 있다.
// pages/Favorites.js
import {useContext} from 'react';
import FavoitesContext from '../store/favorite-context'
import MeetupList from '../components/meetups/MeetupList'
function FavoritePage(){
const favoritesCtx = useContext(FavoitesContext);
let content ;
if (favoritesCtx.toatalFavorites===0){
content = <p>You got no favorites yet. Start adding some?</p>
}else{
content = <MeetupList meetups ={favoritesCtx.favorites}/>
}
return <section>
<h1>My Favorites</h1>
{content}
</section>
}
export default FavoritePage;
- 만들었던 context를 import해온다.
- useContext를 이용해서 이것을 favoritesCtx라는 변수에 담아서 사용한다.
'Front-end > React' 카테고리의 다른 글
Exports & Imports (0) | 2023.01.08 |
---|