React - 5

useState, useEffect, fetch를 중점적으로 공부하자!
useReducer 몰라도 된다!!

이전 코드 복습

• counter 기능 구현하기!
  • input에 있는 값만큼 더하기
  • button 누를 때 마다 더하기!

버튼을 클릭하지 않아도 숫자가 늘어나는 기능

• setInterval()

//interval 실행
id = setInterval(() => {
  console.log(1);
}, 1000);


// 끌때
clearInterval(id)

useEffect의 첫번째 파라미터는 콜백함수, 콜백함수의 리턴값은 함수고, 그 함수는 컴포넌트가 제거될 때 호출된다.

클로저

a = () => {
  let id = 1;
  return () => {
    console.log(id);
  }
}
a()//() => { console.log(id); }

b = a()

자동으로 숫자가 올라가는 기능에서 start, stop 기능 추가해보기~!

MUI 복습!

• Container
• Grid
• ButtonGroup
• Button
  • variant="contained"(색이 차있는 버튼 / 없으면 색 없는 버튼)
• theme로 색상 변경하기!

    import { blue, grey } from "@mui/material/colors";
    const darkThema = createTheme({
        palette: {
        primary: grey,
      },
    });
    
    
    
    
    <ThemeProvider theme={darkThema}>
       <Counter4UseEffect />
    </ThemeProvider>

• 위와 같이 Theme태그 안에 있는 태그들의 버튼은 다 grey 컬러로 바꼈다.
• context API로 인해 변경되었다는데... 이해가 안된다,....ㅎ

context API

https://www.youtube.com/watch?v=JQ_lksQFgNw

• 잘쓰면 고수소리 듣는다!!

// 기본 구조
import React from "react";

export function ContextAPI() {
  return (
    <div className="layout">
      <h1>Context api</h1>
      <button>+</button>
      <ContextAPISub />
    </div>
  );
}
function ContextAPISub() {
  return (
    <div className="layout">
      <h1>sub</h1>
      <button>+</button>
    </div>
  );
}

• useContext를 이용해서 자식의 속성들(디자인속성)을 덮어 씌어버릴 수 있다.
• useContext는 useContext를 구독하고 있는 컴포넌트들만 동적으로 렌더링이 된다.총 5개의 컴포넌트 중에 3개만 가지고 있다면 3개만 재렌더링 된다.

useReducer

const [변경될 값, 바꾸라고 하는 명령] = useReducer(값을 변경하는 함수, 기본값);
function 값을변경하는함수(oldCount:number, action:string):number{
  if(action === "UP"){
    return oldCount + 1;
  } else if(action === "DOWN"){
    return oldCount - 1;
  } else if(action === "RESET"){
    return 0;
  }
}

• useState의 경쟁자
• 똑같은 일을 함
• 근데 취지가 좀 다름
• useState의 장점 = 이해하기 쉬움
• useReducer의 장점 = 상태를 이해하면 쉬움!

오오ㅗ옹 개신기해!!

function MyUseReduce() {
  // const [count, setCount] = useState(0);
  function countReducer(oldCount: number, action: string): number {
    console.log(oldCount, action);
    return oldCount;
  }
  const [count, countDispatch] = useReducer(countReducer, 10);
  return (
    <div className="layout">
      <h1>useReduce</h1>
      <button
        onClick={() => {
          // setCount(count + 1);
          countDispatch("UP");
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // setCount(count - 1);
          countDispatch("DOWN");
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          // setCount(0);
          countDispatch("RESET");
        }}
      >
        0
      </button>
      {count}
    </div>
  );
}

• console.log로 값을 확인했으면 이제 useRedecer을 이용해 값을 변경해보자!

function MyUseReduce() {
  // const [count, setCount] = useState(0);
  function countReducer(oldCount: number, action: string): number {
    console.log(oldCount, action);
    if (action === "UP") {
      return oldCount + 1;
    } else if (action === "DOWN") {
      return oldCount - 1;
    } else if (action === "RESET") {
      return 0;
    }
    return oldCount;
  }
  const [count, countDispatch] = useReducer(countReducer, 10);
  return (
    <div className="layout">
      <h1>useReduce</h1>
      <button
        onClick={() => {
          // setCount(count + 1);
          countDispatch("UP");
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          // setCount(count - 1);
          countDispatch("DOWN");
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          // setCount(0);
          countDispatch("RESET");
        }}
      >
        0
      </button>
      {count}
    </div>
  );
}

출처 : 엘리스 아카데미