Today I Learned-14

2022-12-02 (금)

yarn add styled-components

styled-components에 기본원리
꾸미고자 하는 component를 styled-components 방식대로 먼저 만들고 그 안에 style코드를 작성하는 방식으로 진행

useState의 업데이트 방식
1. 일반 업데이트 방식

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

2. 함수형 업데이트 방식

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

useState로 원시데이터가 아닌 데이터를 변경해야 할 때는 불변성을 유지해야한다❗

---

useEffect (useState 만큼 또는 그 이상으로 보다 더 많이 쓰임)
useEffect는 react component가 렌더링 될 때 마다 특정작업을 수행할 수 있게 하는 hook

'useEffect는 useEffect가 속한 component가 화면에 렌더링 될 때 마다 실행된다.'
('component가 화면에 mount 또는 unmount')

---

의존성 배열 ?
배열안에 값을 넣으면 배열안의 값이 바뀔때만 useEffect를 실행해라

의존성 배열 안에 아무것도 넣지 않았다는 것은 처음에 딱 한 번만 실행이 되고 그 이후로는 어떤 일도 일어나서는 안된다는 것. 함수의 실행조건을 제어할 수 있다.
= '어떤 일이 일어나도 useEffect가 실행이 되면 안된다.'
왜냐하면 ! 어떤 값이 변할 때마다 바뀌기로 약속을 했는데 주어진 값이 지금 하나도 없음

[](비워진 의존성 배열)
: useEffect를 사용하는데 어떤 함수가 component가 렌더링될 때 딱 한번만 실행을 하고 싶은 경우

[value](값이 있는 의존성 배열)
: 최초 렌더링 뿐만 아니라 해당 값이 변할 때 마다 useEffect 안에 있는 코드도 계속해서 실행이 된다, useEffect 안에 있는 코드도 계속해서 실행이 된다는 뜻

---

useEffect를 활용하는 방법

• cleanup(클린업) : component가 화면에서 사라졌을 때 무언가를 실행하고 싶다
  => 사용방법 : useEffect 안에 return을 넣어주고 그 return으로 우리가 실행하고 싶은 함수를 넣어주면 됨
  

---

React-redux 패키지 (redux와 React-redux를 다운로드)

yarn add redux react-redux

React-redux : redux를 React에서 사용할 수 있도록 서로 연결해주는 패키지

새프로젝트 생성 -> src폴더에 redux폴더 -> redux폴더에 config폴더&modules폴더 생성

config폴더에 configStore.js(👇밑의 코드) 파일 생성

import { createStore } from "redux";
import { combineReducers } from "redux";

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store; 

폴더 각각의 역할
redux 폴더 : redux와 관련된 모든 코드를 모아 놓을 폴더
config 폴더 : redux의 설정과 관련된 파일을 모아 놓을 폴더
configStore.js : configStore.js 파일은 중앙스테이트 관리소, Store를 만드는 설정코드가 있는 파일
modules 폴더 : state의 그룹 (ex. todolist를 만든다면 그 todolist에 필요한 state들이 모두 모여 있을 todo.js파일을 하나 생성하는게 그게 module이고 이 module을 저장하는 폴더)

설정코드를 작성할 때 주의사항
1. 우리가 작성하는 설정 코드는 이해할 필요가 없는 코드
(설정코드를 작성하는 이유는 redux를 만든 redux팀에서 이렇게 설정을 하라고 안내하고 있기 때문)
2. redux사용방법을 중점으로 공부해야한다.

---

reducer(리듀서) : 변화를 일으키는 함수
reducer는 '함수'라는 것만은 기억하기 !
dispatch를 통해 전달받은 action객체를 검사하고, 조건이 일이했을 때 새로운 상태값을 만들어내는 변화를 주는 함수

redux는 reducer를 포함한 store !

reducer는 action을 일으켰을(dispatch) 때 자동실행되고 그 action에 맞게 데이터를 수정해줌, 그래서 store에 있는 데이터를 바꿔주는 역할을 reducer가 한다.

우리가 생성한 modele을 store에 잘 연결했는지 확인하는 방법
component에서 store를 직접 조회하기
=> component에서 redux의 store를 조회하고자 할 때는 useSelector 라는 react-redux의 hook을 사용한다.

보통 module은 기능의 이름을 따서 생성한다.
module의 구성요소로는 initialState, reducer가 있다.
module을 만들면 store에 연결한다.
component에서 store을 조회할 때는 useSelector를 사용한다.
useSelector, state는 모둔 module에 state를 조회할 수 있는 값

---

reducer에게 내가 어떤 action을 하길 원한다 표현하는 행동을 코드로 나타내면 action객체가 나온다.

🌟action객체는 type이라는 key를 가져야 한다.🌟
=>action객체를 reducer에게 보냈을 때 reducer는 객체 안에서 type이라는 키를 보기때문이다.

action객체(type)를 보내는 방법(dispatch를 사용하는 방법)
: useDispatch라는 hook을 사용해야한다.

action객체(type)의 value는 대문자로 작성하기
: (ex) `
``
{number}
<button
onClick={() => {
dispatch({ type: "PLUS_ONE" });
}}

  >

useDispatch라는 것은 store의 내장함수 중 하나로 'action을 발생시킨다'정도로만 이해하기
dispatch란 action객체를 reducer로 보내는 전달자 함수


action creator를 사용하게 되면
action객체를 한 곳에서 관리할 수 있도록 함수와 action value상수를 이용하게 된다.

action createor를 사용하는 이유
1. 휴먼에러를 방지할 수 있다.
(action 객체 type value를 상수로 만들어 놓았기 때문에 개발툴에서 자동완성 보조 기능을 지원받을 수 있다.)
2, 유지보슈 효율성이 굉장히 증가한다.

---

payload : N을 더하고 조금 더 어려운 명령을 리듀서에 내리고 N을 리듀서에 보내야하는데 이 N이라는 목적어를 Action객체에 같이 담아서 보내줄 때 우리는 그것을 같이 담아 주는 것을 payload라고 한다. 







---
* 리펙토링 ?

* 리액트는 함수평 업데이트 방식에서 왜 이렇게 동작할까?

* strict mode(스트릭트 모드) /뭐길래 왜 2번씩 출력됨 ?

* react의 LifeCycle ?


---