React...1

• 싱글 웹페이지 방식으로 렌더링을 주기적으로 해서 데이터가 바뀌면 즉각적으로 바뀌어짐
• html+js=jsx
• html 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만드는데 그것을 component
• 이 컴포넌트를 사용하면 재사용이 얼마든지 가능해서 코드량을 획기적으로 줄일 수 있다.
• component = 코드 재사용가능

Redux

• 모든 component가 props 없이 state를 직접 꺼낼 수 있음
• 상태 관리가 용이(state 관리 용이)
  • 컴포넌트가 state를 변경시키다 오류가 나면 컴포넌트를 다 확인을 해야됨으로 시간이 많이 걸림 헌데 Redux를 쓰면 추적이 용이함

index.js
import {Provider} from 'react-redux';
import {createStore} from 'redux';

const 체중 =100;
function reducer(state=체중,action){//수정 꺼내쓰는걸 reducer
	if(action.type=='증가'){
		state++;
		return state
	}else if(action.type==='감소'){
		state--;
	return state
	}else{
	return state
	}

}

let store=createStore(reducer)

ReactDOM.render(
	<React.StrictMode>
		<Provider store={store}>
			<App/>
		</Provider>
	</React.StrictMode>
	document.getElementById('root')
);

App.js
import {useSelector} from 'react-redux'
import {useDispatch,useSelector} from 'react-redux'
function App(){
	const 꺼내온거 = useSelector((state)=>state);
	const dispatch = useDispatch()
	return(
		<div className="App">
			<p>님의 처참한 몸무게 :{꺼내온거}</p>
			<button onClick={()=>{dispatch({type:'증가'})}}>더하기</button>
		</div>
	);
}
export default App;