React 기초 다지기

리엑트 기초(프로젝트를 통한 예제와 이해)

리엑트를 다룸에 있어서 아직 부족함을 느끼고 간략하게나마 순서를 적어보고, 그 순서에 따라서 예제 프로젝트를 생성하는걸 목표로 한다.

// React , Redux

1. 순서

-redux 사용 순서
action 함수 정의

	//action.js
    const SHOW_FLAG = 'SHOW_FLAG';
    const HIDE_FLAG = 'HIDE-FLAG';
    export {SHOW_FLAG, HiDE_FLAG}

reducer 생성

	//reducer.js
    import {SHOW_FLAG,HIDE_FLAG} from './action'
    const reducer = (type,payload) => {
    	switch(type){
        	case SHOW_FLAG = {
            	...
            }
            case HIDE_FLAG = {...}
        }
	}

selector 생성

	const store = {
		Flag : ture || false
    }

import해서 dispatch로 쓰기

	//HomeScreen
    import {SHOW_FLAG,HIDE_FLAG} from './action'
    export default function HomeScreen(){
    	const store = useSelector();
        const dispatch = useDispatch();        
        const onFlagShow = () => dispatch('SHOW_FLAG')
        const onFlagHide = () => dispatch('HIDE_FLAG')
        return {
        	<div>
        </div>
    }
}

좋은 웹페이지 즐겨찾기