생활코딩: react-redux 예제1

 

 

1. redux와 react-redux 설치

$npm install redux react-redux

 

2. App.js 작성

 

import React, {useState} from "react";
import "./style.css";
import {createStore} from 'redux';
// import {configureStore} from 'redux';
import {Provider, useSelector, useDispatch, connect} from 'react-redux'


/* 스토어를 생성할 때 reducer를 생성한다. 리듀서는 스토어에 있는 스테이트의 변경 여부를 결정하는 역할을 한다.
따라서 reducer는 2개의 파라미터를 받는다. 첫 번째는 현재 스테이트 값인 currentState이고, 두 번째는 현재 값을 변경할 수 있는 action이다.
이렇게 받은 값을 리턴하면 리턴한 값이 새로운 스테이트의 값이 된다.
*/
function reducer(currentState, action){
  // currentState의 값이 undefined라면 스테이트가 정의되지 않았다는 뜻.
  if(currentState === undefined){
    return {
      number:1 //그럴 때는 스테이트의 기본 값을 반환함으로써 기본값을 설정할 수 있다.
    };
  }
  const newState = {...currentState}

  //action의 type 값을 체크
  if(action.type === 'PLUS') {
    newState.number++;
  }

  //반환
  return newState;
}

const store = createStore(reducer); //스토어 생성. 반환된 newState의 값이 이전과 다르면 다시 렌더링한다.


export default function App() {

  // const [number, setNumber] = useState(1); 리듀서를 만들었으면, 여기서 스테이트를 더이상 사용하지 않는다.

  return (
    <div id="container">
      <h1>Root</h1>
      {/* Left1과 Right1을 나란히 배치하기 위해 div로 묶고 id="grid"로 하였다. style.css에서 #grid의 css를 변경해 준다. */}
      <div id="grid">
        <Provider store={store}> {/* Provider 컴포넌트는 props중에 store를 반드시 정의해야 한다. 정의했다면 Provider 컴포넌트의 자식 컴포넌트들은 store를 사용할 수 있게 된다. <Left3>로 가자*/}
          <Left1></Left1>
          {/* <Right1 onIncrease={()=>{setNumber(2);}}></Right1> */}
          <Right1></Right1>
        </Provider>  
      </div>
    </div>
  )
}

function Left1(props) {
  
  return (
    <div>
      <h1>Left1 : {props.number}</h1>
      
      <Left2 number={props.number}></Left2>
    </div>
  )
}

function Left2(props) {
  console.log('2')

  return (
    <div>
      <h1>Left2 : {props.number}</h1>
      <Left3 number={props.number}></Left3>
    </div>
  )
}

function Left3(props) {
  console.log('3');

  /* f라는 함수는 state를 입력값으로 받고 그 중에서 어떤 값을 사용할 것인지 함수에 명시한다.
  여기서는 number를 사용하겠다는 뜻이다. 
  function f(state) {
    return state.number;
  }
  const number = useSelector(f);

  바로 밑은 아래는 간략화 한 코드
*/
  const _number = useSelector((state)=> state.number);
  /*전역적이라고 할 수 있는 store에 저장된 number 스테이트와 말단에 있는 컴포넌트의 _number를 무선으로 연결한 것이다.
    
  여기서 설정 끝났으면 Right3에서 useDispatch()을 사용하고 버튼설정을 해줘야 한다. 
  useDispatch().type의 값이 reducer 함수의 action 의 값을 변경하면, 그에 따라 reducer함수에서 스테이트 값을 변경해준다. 
  그 값을 스토어에 반환하고 프로바이더에 전달하여 다시 렌더링한다.
  */

  return (
    <div>
      <h1>Left3 : {_number}</h1>
      {/* 변경 전에는 state의 number의 기본값인 1이 표시된다. */}
    </div>
  )
}

function Right1(props) {
  return (
    <div>
      <h1>Right1</h1>
      {/* <Right2 onIncrease={()=>{props.onIncrease();}}></Right2> */}
      <Right2></Right2>
    </div>
  )
}

function Right2(props) {
  return (
    <div>
      <h1>Right2</h1>
      {/* <Right3 onIncrease={()=>{props.onIncrease();}}></Right3> */}
       <Right3></Right3>
    </div>
  )
}

function Right3(props) {
  //react-redux의 useDispatch 사용. action값을 변경하는 데 사용
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Right3</h1>
      <input type="button" value="+" onClick={()=>{
        // props.onIncrease();

        //action의 type 값을 reducer 함수에 전달한다. reducer 함수로 가자.
        dispatch({type: 'PLUS'});

      }}></input>
    </div>
  )
}


/**

Right3 "+" 버튼 onClick => props.onIncrease 
=> Right2 onIncrease => props.onIncrease
=> Right1 onIncrease => props.onIncrease
=> App onIncrease={()=>{setNumber(2)}}

: App과 "+"버튼 사이에 컴포넌트가 1억개 있다면 RIght가 App까지 올라가는 데 1억개,
다시 Left로 내려가는 데 1억개, 총 2억개의 컴포넌트가 부모자식 관계로 이어져 변경되어야 한다.
말하자면 부모 자식 간의 컴포넌트가 모두 유선으로 연결돼 있는 것이다.
이들을 전부 연결하지 않고 필요한 
=========

Light 말단에 있는 state와 Right 말단에 있는 이벤트를 무선으로 연결하기 위해 필요한 것이 redux이다.

redux를 사용하려면 react-redux를 사용해야 한다. react-redux는 독립적인 도구인 redux과 react를 연결해 주는 역할을 한다.

로컬에서는 npm을 이용해 redux와 react-redux를 설치한다.

$npm install redux react-redux
=========
그리고 작업
=========
redux를 사용하는 경우 스테이트를 사용하는 컴포넌트의 값만 바뀌고 그 부모 컴포넌트는 렌더링 되지 않기 때문에 
성능 측면에서도 상당한 이점이 있다.

1. state에 변화를 가하는 컴포넌트에서 useDispatch 사용
2. useDispatch()가 action의 type 값을 받아 reducer 함수에 전달.
3. reducer 함수에서는 action의 type을 체크하고 state를 변경
4. store에 스테이트 값을 전달.
5. store 값을 <Provider>에 전달(자식 컴포넌트가 store값을 사용 가능)
6. 변화결과를 표시하는 컴포넌트에서 useSelector() 함수를 사용하여 store의 state 값을 받는다.
7. 해당 값을 사용한다.



 */

 

 

 

 

3. style.css 작성

/* 이유는 모르겠지만 이 css 설정이 #container의 css 설정보다 아래에 있으면 적용되지 않는다. 
    1fr 1fr: 왼쪽과 오른쪽이 똑같이 1만큼 나란히 부피를 갖도록 처리
*/
#grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


#container, #container > div div { /* #container: 바깥쪽 경계선, #containder div: 안쪽 경계선*/
    /* 경계선의 두께 */
    border: 5px solid red; 

    /* 안쪽 경계선과 바깥쪽 경계선의 간격 */
    margin: 10px;
};