useState / useEffect / useContext

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;

1. context 생성 (비어있는 즐겨찾기, 즐겨찾기 수, 비어있는 함수들) : FavoritesContext
2. useState으로 즐겨찾기 상태와 즐겨찾기 set 요소를 만든다.
3. addFavoriteHandler 같은 함수를 이용해서 즐겨찾기 state를 변경해 준다. (state set을 이용해서 변경한다.)
4. 변경한 state를 이용해서 context에 새로 넣어줄 데이터를 만든다.
5. 생성했던 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")
);

1. index.js에서 위에서 만든 ContextProvider을 가져온다. 이때 기본값으로 보냈던 context가 아니라 컴포넌트 함수를 가져오기 위해 그 이름으로 import 한다. {FavoritesContextProvider}
2. 렌더링할때, 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;

1. 만들었던 context를 import해온다.
2. useContext를 이용해서 이것을 favoritesCtx라는 변수에 담아서 사용한다.