#03 리액트 숙련 : React Redux (+ input 태그로 payload ) 카운터 프로그램 만들기

0. 리액트 리덕트 카운터 프로그램 (input 태그 : payload 하기 전 )

#02 리액트 숙련 :: React Redux 카운터 프로그램 만들기

 

 

1. input에 입력된 값 (useState): 형변환

[+] 버튼을 누르면 string으로 들어와서 0+2 = 2가 아니라 02가 됨

[위치: App.jsx]

<input type="number" value={number} onChange={(event) => setNumber(+event.target.value)}></input>

▶event.target.value 앞에 + 해주면 형변환 됨.

                onChange={(event) => {

                    const { value } = event.target;

                    setNumber(+value);

                }}

▶ 구조분해할당으로 이렇게도 사용 가능

 

 

2. App.jsx

import { useState } from 'react';

import { PLUSN } from './redux/modules/counter';

 

const [number, setNumber] = useState(0);

 

return (

<div>현재 카운트: {counter.number}</div>

            <input

                type="number"

                value={number}

                onChange={(event) => {

                    const { value } = event.target;

                    setNumber(+value);

                }}

            ></input>

            <button

                onClick={() => {

                    dispatch(PLUSN(number));

                }}

            >

                +

 </button>

);

▶ input 태그에 들어온 값은 number 를 사용

▶ input 태그는 useState()를 사용하여 입력하는 값 setNumber(+value)로 넣어주기 => '+'는 위에서 말한 형변환!

 

3. counter.jsx

const MINUS_N = 'MINUS_N';

 

export const PLUSN = (payload) => {

    return {

        type: PLUS_N,

        payload: payload,

    };

};

▶ payload를 사용해서 input값에 입력된 값을 저장

const counter = (state = initialState, action) => {

    switch (action.type) {

       

        case PLUS_N:

            return {

                number: state.number + action.payload,

            };

       

        default:

            return state;

    }

};

▶ counter 리듀서 (state에 변화를 일으키는 함수)

 

 

끝.