react - 싱글페이지 애플리케이션(복습)(useState, useReducer, useContext)

한 개의 페이지로 이루어진 애플리케이션

상태 

useState(초기값) => [ state, setState ]

useState(10) => return [ state, f ]

const stateArr = useState(10);

const state = stateArr[0];

const setState = stateArr[1];

const [ state, setState ] = useState(10);

 

function reducer(state, action) {

    switch(action.type){

        case "CHANGE_USER":

            return {

                ...state,

                users: state.users.map(user=> action.id === user.id),

            }

    }

}

 

useReducer(reducer, 초기값) => [ state, dispatch ]

 

dispatch(액션객체) => reducer를 실행

dispatch({

    type: "CHANGE_USER",

    id: 10,

})

 

props / Context API

 

App 컴포넌트(상태)   ->   Users 컴포넌트   ->   UserList 컴포넌트

 

프로젝트 안에서 전역전으로 사용할 수 있는 값을 관리

createContext(null); => context를 리턴 -> 컴포넌트

const MyContext = createContext(null);

 

<MyContext.Provider value="green">

    <App>

        <Main/>

    </App>

</MyContext.Provider>

context값을 사용

useContext(MyContext) => green을 반환