TIL - 리덕스 적용

• 리덕스를 적용하기 전에 가장 큰 문제는 입문 주차에 진행했던 과제를 말로 설명할 수가 없다는 것이었다.

• 그래서 코드를 다시 작성해서 한 줄 한 줄 코드를 뜯어보고 어떤 로직이 있는지 확인해서
  이해하는 것으로 목표를 잡았다.

• 과제의 완성보다 과제의 이해(리액트 이해)를 목표로 잡아서 진행했다고 보면 될 것 같다.

• 서로 구글링도 해보고 모르는 건 다른 반 사람들에게 조언도 구해보고 기술 매니저님이랑 짝 코딩도 진행해보았다.

• 그리고 새벽반 사람들과 화면 공유를 하면서 기술 매니저님이랑 했던 짝 코딩을 우리끼리 해보았고,

• 서로가 이해한 게 맞는지 처음부터 끝까지 만든 코드를 설명하고 질문도 받는 시간을 가졌다.

//App.js

import { useState } from "react"
import './App.css';

function App() {
  //변수는 값을 바꾸면 바로 적용이 된다.
  //왜냐하면 변수는 동기적으로 작동을 하기 때문이다.
  let counter = 0;
  //매개변수 => 초기값이 담긴 state, state값을 변경해주는 함수
  const [counter2, setCounter2] = useState(0)
  const increase = () => {
    counter = counter + 1;
    //state 값은 비동기적으로 처리
    //함수가 끝날때까지 기다렸다가 state 바꾸는 함수들을 모아서 한번에 실행
    setCounter2(counter2 + 1);
    console.log("counter는", counter, "counter2 state는", counter2);
  };

  //1. 유저가 버튼을 클릭한다
  //2. counter +1 해서 1이됨
  //3. setState함수 호출
  //4. console.log 실행됨 
  //   변수값은 1로 보이고 stat값은 아직 안변했기 때문에 그 전에 값이 보인다.
  //   함수 끝
  //   app 다시 re render
  //   let counter = 0 거치면서 count 값은 다시 0으로 초기화가 된다.
  //   업데이트된 state 값이 보인다. 그리고 완료.
  
  return (
    <div>
      <div>{counter}</div>
      <div>state:{counter2}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}
//대부분, 웬만한거엔 다 state를 쓸건데 잠시 기억해야하는 값은 변수를 쓸거야!
export default App;

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

//Box.js
//rafce
import React from 'react'


const Box = (props) => {
    console.log("props:", props);
    return (
        <div className="box">
            Box{props.num}
            <p>{props.name}</p>
        </div>
    );
};

export default Box