useReducer

useReducer는 redux의 핵심 부분을 리액트에 들여온 기능입니다.

소규모 앱에서는 redux를 사용하지않고 useReducer Contextapi 조합으로 대체를 할 수 있습니다.

비동기 부분 처리를 위해 결국에는 리덕스를 써야 합니다.

 

 

컴포넌트의 구조입니다. 실직적으로 클릭되는 것을 td라고 했을 경우 데이터를 전달하기 위해서 table, tr을 거쳐서 td로 오게 됩니다. 이러한 해결을 위해 contextApi를 사용합니다. 그리고 state자체의 개수를 줄이는 useReducer가 있습니다.

 

state가 많아지면 관리가 힘들며 넘겨줄 때도 여러 컴포넌트를 거쳐야 합니다. state를 통일할 수 있도록 도와주는 것이 useReducer입니다. 

 

문법은 다음과 같습니다.

const [state, dispatch] = useReducer(reducer, initialState, 지연초기화);

initialState는 다음과 같이 선언된 state들을 초기화와 묶어줍니다.

const initialState = {

    winner : '',
    turn : 'O',
    tableDate : [['','',''],['','',''],['','','']],
}



const TicTacToe = () => {

    const [state, dispatch] = useReducer(reducer, initialState);

    // const [ winner, setWinner] = useState('');
    // const [turn, setTurn] = useState('0');
    // const [tabelData, setTabelDate] = useState( [['','',''],['','',''],['','','']]  );

 

reducer는 함수인데 문법은 다음과 같습니다.

const reducer = (state, action) => {

    
}

    const onClickTable = useCallback( () => {
        dispatch({
            type : 'SET_WINNWE',
            winner: 'O'
        });  //디스패치안에 들어가는 것은 action객체

    }, []);

    return(
        <>
        <Table onClick={onClickTable}/>
        {state.winner && <div>{winner}님의 승리</div>}
        </>
        );

action을 해석해서 state를 직접 바꿔주는 것이 reducer입니다.

action을 dispatch 할 때마다 reducer가 실행됩니다.

const reducer = (state, action) => {
    switch(action.type) {

        case 'SET_WINNER' : 
        return {
                ...state,
                winner : action.winner,
        }
    }

}

 

state가 존재한다. state는 절대 직접 전으로 변경할 수 없다 그러기 위해서 action을 만들고 action을 dispatch 하고 action을 어떻게 처리할지를 reducer에서 관리를 합니다.