리액트 리덕스 단순한 용어 정리

React 
class Test extends Comp{
   render( return </>)
}
FC 
const Test = () => {
    return (<></>)
}
Redux
{action, creator, store}
Action
{type: "..."}
Action creator
arrow 함수
1. 유명:
export const test = (data) => {
return {type: '', data}
}
2. 무명: 콜백
(()=>{})
Props
@자바: get, set
@자바스크립트: 프로퍼티: get, 스테이트: set

 

데이터 변환 방법
위로 바뀌는것 : 이벤트 버블링 (콜백)
밑으로 전달 : ( {  ...  } )

connect: mapStateToProps
mapDispatchToProps

 

store
reducer
function(state, action){  }

 

공간

https://ko.reactjs.org/docs/hooks-reference.html#usestate

Hooks API Reference – React

기본 Hook

useState : const [message, setMessage] = useState("")
useEffect : 

useEffect(()=>{
        alert(`[] 로 하면 처음 실행시 한번만 작동함`)
    }, [])
useContext

추가 Hooks

useReducer
useCallback :

const onIncrease = useCallback(()=> dispatch(increase()), [dispatch])
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

 

https://react-redux.js.org/api/hooks

React Redux · Official React bindings for Redux

 

useSelector()

connet 대체해 스토어의 상태를 조회

const number = useSelector( state => state.conterReducer.number )

useDispatch()

컴포넌트 내부에서 스토어의 내장 함수  dispatch({type: ''}) 사용

state.counterReducer.number)

useStore() -- 정말 사용해야 할 순간만 사용하라.. 

리덕스 스토어 객체를 직접 사용

 

 

state.counterReducer.number)