리액트 // hooks 훅스 / useState / useEffect / useMemo / useRef

 

훅스

 

 

자바 - 멤버변수 메소드

자바스크립트 - 함수

 

함수형 프로그래밍

의존성배제

상태가 없다 (즉 멤버변수가 없다)

대신 state 를 넘겨준다 (DB에서 들고온 데이터를 state로 가져온다)

DB + 변수 + 함수파라미터 모두 동기화

 

의존성 배제

엔지니어가 가로등을 고치려면 망치와 사다리가 필요하다고 가정한다

엔지니어는 망치와 사다리에 의존적이다

 

1번가로등 고장 -> 정상

2번가로등 정상

 

이렇게 확인하여 고치는 것이 아니라 저장된 문서(DB)를 이용하여 고장확인을 하는 것

이것이 함수형

 

hooks

{useState}를 임포트해준다

0자리는 오브젝트자리

 

 

 

add 함수 추가

 

 

 

숫자가 증가한다

 

...(정규연산자)는 배열을 for문으로 뿌리는 것이라고 생각하면 됨

 

변경버튼을 누르면 비밀번호만 바뀐다

 

변수가 여러개 필요하다면 여러개 선언하면 된다

 

---------------------

함수형 컴포넌트에서 props 받으려면

괄호에 바로 넣어버리면 된다

---------------------

 

useEffect

클래스형 컴포넌트의 componentDidMount와 같다

 

 

change 함수 생성

 

여러번 눌러도 한번만 변경되고 더이상 변경되지 않는다

 

대괄호가 들어가면 최초실행시에만 콘솔로그가 뜬다

 

눌려도 렌더링 문구가 안뜬다 useEffect (초기화Constructor의 용도로 사용된다)

 

대괄호 안에 name을 넣으면

 

렌더링이 처음 + 이름변경 했을 때 한번 렌더링 문구가 뜬다

 

useEffect는 특정 값이 변경 되었을 때 캐치하고 싶은 경우!

 

숙제 = 용도 생각해보기

 

useReducer는 리덕스를 배워야한다 (상태관리)

 

----------------

 

useMemo (필수!)

axios 같은 것을 받을 때 메모에 저장

연산최적화 (shouldUpdateComponent)

 

자바스크립트의 reduce 는 누적값에 추가값을 더하거나 빼거나 처리

a는 누적값 b는 더할 값

 

e는 컨텍스트

e.target 은 input 태그

 

 

 

 

숫자를 넣을 때마다 평균값을 계산한다

렌더가 실행되면서 값 변한거있는지 찾는다

하지만 list 는 그대로라서 평균값은 그대로

 

값이 변경 되면 리렌더링 되서 괄호가있는 함수

getAverage(list)와

JSX {괄호}안에만 변경이된다

 

-----

 

memoAvg는 list 값이 변경 되었을 때만 실행하는 것

 

 

import React, { useState, useMemo } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산 중..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b); //
  console.log(sum);
  return sum / numbers.length;
};

const App = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  //useMemo(실행할함수,[변수,변수])
  const memoAvg = useMemo(() => getAverage(list), [list]);

  const onChange = (e) => {
    setNumber(e.target.value);
  };

  const onInsert = (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  };

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      평균값: {memoAvg}
    </div>
  );
};

export default App;

 

---

useEffect와 useMemo 차이

useEffect 하나의 일이 발생했을 때 추가적인 일

useMemo 어떤 것이 변경 되었을 때 실행 (걸러주는 것 : 데이터 변경되면 실행 : ex 다운로드)

---------

+ useCallback

----------

ref는 DOM에 접근하는 유일한 방법

key는 해당 태그의 고유한 속성

useRef - 밸리데이션체크

특이한 문법

자바스크립트에서 변수만들 때 변수를 동적으로 만들고 싶을 때 

리액트에서는 값을 변수이름으로 쓸 수 있다 

-------------

 

화면시작하자마자 포커스를 주고 싶다

 

 

 

 

 

콘솔로 확인해보면 쓸 수 있는 속성들이 나온다 

 

 

 

 

커서가 가있고 배경색이 바뀌어 있다