리덕스란?

오늘 차장님께 리덕스에 대한 설명을 들었다.

간단한 개념공부를 하며 이해했던 내용을 정리해보았따.

 

리덕스

 

리덕스를 왜 쓰는가?

 1. props 문법이 번거로울 때

 2. state(상태)변경,관리할 때

 

1 )

상태 변수를 내부 컴포넌트로 전달하기 위해서는  props 문법으로 끝없이 전달해줘야한다.

(전달하지 않고 그냥 변수를 그대로 가져다 쓸 수 없음)

 

개귀찮아!

=> 그래서 쓰는 것이 REDUX

 

state를 보관할 수 있게 된다.

props 문법으로 계속 전달할 필요 없이 state를 보관한 곳(ex. store.js)에서 꺼내다가 쓰면 됨.

 

component에서 store에 넣어둔 state를 쓰려면?

function App() {

	const myScore = useSelector(( state ) => state );
	
    return (
    	<div className="App">
        	<p>Score is : { myScore } </p>
        </div>
    );
}

이렇게 직접 꺼내서 쓴다. 진짜 짱편하다

 

2)

state관리가 용이하다 === 수정이 쉽다 === 범인찾기가 쉽다

 

state를 수정을 해야한다면?

- state를 props문법으로 끝없이 내부의 컴포넌트로 보냈다면 백만개의 컴포넌트를 다 뒤져봐야한다.

 

- 해당 state를 리덕스를 이용해 store에서 가져왔다면, 해당 state의 아래에 수정방법을 미리 정의해둔 뒤에

   각 컴포넌트에서는 수정을 요청만 하는 것.

만약 버그가 발생한다면 범인은 하나밖에 없음. 각 컴포넌트를 다 뒤질 필요가 없다

const 체중 = 100;

function reducer(state = 체중, action){
 if(action.type === '증가'){
   state++;
   return state
 }
 else if (action.type === '감소'){
   state--;
   return state
 {
 else {
 return state
 }
 
 }

이렇게 해당 state의 아래에 수정방법을 정의한다.

증가요청을 한다면 체중 + 1, 감소요청을 한다면 체중 -1 이 되게끔.

 

그럼 컴포넌트에서 그 state를 수정요청하려면? => 이때 쓰는 것이 dispatch

function App() {

	const myScore = useSelector(( state ) => state );
    const dispatch = useDispatch()
	
    return (
    	<div className="App">
        	<p>Score is : { myScore } </p>
            <button onClick={() => {dispatch({type : '증가'}) }}>  점수 더하기 </button>
        </div>
    );
}

이렇게 수정요청을 할 수 있따