[React] Component, props, Redux, reducer

Component

리액트의 장점!

• 긴 HTML 단락을 컴포넌트화 하여 호출하면 관리하기 편하고 코드가 간결해진다.
• 이름은 보통 대문자로 시작
• return 값은 가장 크게 <></>로 묶어 주어야함.

Component화 하면 좋은 HTML 단락은?

• 반복출현 하는 코드
• 자주변경 되는 코드
• 다른 페이지를 만들때도 유용

하지만, state 복잡해짐.
다른 func,컴포넌트에서 선언된 변수 참조 하려면 props 를 사용해야 한다.

props

자식 Component에서 부모 Component를 사용하기 위함

// 부모
function 부모Component(){
    let ]부모에있는state,setState] = useState('부모로부터');
    return(
        <>
            <자식Component 전송할이름={state명}>
        </>
    )
}

//자식
function 자식Component(props){
    return(
        <div>props.전송할이름</div>
    )
}

부모에서 자식에게 전달할 때 인자는 여러개여도 된다.
그렇게 전달받은 자식에서는 props.전달받은이름 으로 접근하여 사용할 수 있다.

Redux

상태관리 라이브러리!
props 전송 없이도 모든 컴포넌트가 그 state를 사용할 수 있도록 한다

npm install redux react-redux

//index.js
import { Provider } from 'react-redux';
import { createStore } from 'redux';
let store = createStore( () => {
  return[
    {id:0, name: '멋진신발', quan:2}
  ]
})
    <Provider store={store}>
      <App />
    </Provider>

redux에 데이터로 사용하려는 state를 createStore()로 만든다.
createStore()에 콜백함수가 들어가고 만드려는 state의 초기값을 return한다.
Provider에 만든 state를 props처럼 전달한다.

//App.js
import Cart from './Cart.js';
...
        <Route path="/cart" element={<Cart />}></Route>

//Cart.js
function Cart(props){
  return (
    {props.state[0].name}
  {/* stateToProps란 함수에서 state란 이름으로 return했으니  */}
  )
}

function stateToProps(state){ //여기인자의 state는 Provider에서 인자로 넘긴 store 변수임.
    return {
      state : state //인자state(리덕스의 store)를 state란 이름으로 return
    }
  }
  
export default connect(stateToProps)(Cart);
// stateToProps함수와 Cart.js를 이어준다

reducer / dispatch

redux에서 데이터를 수정하려면
1 . reducer 함수를 만들고 데이터 수정 방법을 정의한다.

reducer(초기값,액션){
  return ()
}

액션 : 데이터 수정을 위한 정보를 가진다. dispatch 안의 모든 객체들을 가짐. 주로 type 값 객체(문자열 등) 형태 사용하여 분기 만듦

//index.js
let 초기값 = [{id : 0, name : '멋진신발', quan : 2}];
function reducer(state = 초기값, 액션){
  if (액션.type === '수량증가') {
    let copy = [...state];
    copy[0].quan++;
    return copy
  } else {
    return state
  }
}
let store = createStore(reducer);

//Cart.js
<td><button onClick={()=>{ props.dispatch({type: '수량증가'}) }}> + </button></td>

dispatch인자를 type에 '수량증가'로 주면 reducer에서 그에 맞는 조건이 있을 경우 해당 코드가 실행됨!

2 . 수정할 때 dispatch() 함수를 호출하여 reducer 함수에 정의한대로 수정하도록 한다.

useReducer

const [상태 객체, dispatch 함수] = useReducer(reducer 함수, 초기 상태, 초기 함수)

const [state, dispatch] = useReducer(reducer, initialState);