[리액트를 다루는 기술] Hook (useState, Effect, Reducer, Ref) 1편

useState

가장기본적인 Hook

함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다. ( useState를 구조분해할당으로 받은 것 뿐임)

const [name, setName] = useState('');

 

 

인자로 초깃값이 들어가는데 아무거나 다 잘 먹는다.

호출하면 배열이 반환되는데 첫번째 원소는 상태값 두번째 원소는 상태를 바꾸는 함수가 들어있으며 이 함수는 세터함수라고 한단다

한 컴포넌트 안에 여러번 사용해도 상관 없단다(한개의 useState는 하나의 상태만을 관리하므로 여러번 사용해야 할 때가 분명있다)

리액트를 처음배운다면 useState가 시작이다

 

---

 

함수형업데이트

useState로 생성한 state가 변경이 될 때마다 랜더링이 일어나게 되는데 리액트 환경은 랜더링을 최소한으로 줄이고 싶어한다.

그렇기떄문에 배치성으로 처리된다.(배치성업데이트)

그렇기에 기본적인 setFrom(form + 1) 과 같이 매개변수로 인자를 받은 것을 연속해서 몇개를 쓰든 배치성업데이트에 따라서 1번으로 인식하게 되어 원하는 값과 다른 값이 나올 수 있다.

const [num, setNum] = useState(1);

<button onClick={() => {
	setNum(return num + 1)
    setNum(return num + 1)
    setNum(return num + 1)			//3이 증가할거라고 생각하면 땡
    }}>
	누르면 1증가
</button>

<button onClick={() => {
	setNum((num)=> return num + 1)
    setNum((num)=> return num + 1)
    setNum((num)=> return num + 1)	//3이 증가
    }}>
	누르면 1증가
</button>

 

.

---

useEffect

리액트 컴포넌트가 랜더링될 때마다 특정 작업을 수행하도록 설정 할 수 있는 녀석 컴포넌트가 화면에 보여질때 혹은 사라질 때 어떠한 작업을 수행하게 하고싶음

함수는 첫번째 인자로는 수행하는 함수가 오고(보통 화살표 함수) 두번째 인자로는 의존성 배열이 온다.

맨처음에 로딩 되었을때만 useEffect가 실행되게 하고 싶은데 state의 값이 변할때마다 실행되기 때문에 그냥 아무것도 안하고 쓰면 원하는 바가 아니다.

그래서 의존성 배열에 인자를 넣어준다 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다.

어떤값을 입력하든 간에 의존성배열이 비어있기떄문에 어떤 state가 변해도 화명니 처음 보여질 떄를 제외하고는 보이지 않는다.

 

두개씩나오는 콘솔은 index.js에 strickMode때문이라서 그걸 지우면 된다.

 

clean up 기능은 사라졌을 때 실행하고싶다면!! useEffect안에서 return으로 함수를 받는다면 그 함수는 컴포넌트가 사라질때(useEffect 끝날 때) 실행된다. 

---

useReducer

상태를 업데이트 하고 싶을 때 사용하는 놈이라는데?? 그럼 useState와 함께 써야겠네??

reducer함수에서 새로운 상태를 만들 떄는 반드시 불변성을 지켜주어야 한다.

현재상태와 액션(업데이트를 위한 필요한 정보를 담은 것)을 파라미터로 가져간다.

리덕스에서 개념 다시 나오니까 그때 또 들러서 확인하자.

함수를 먼저 선언을 해서 로직을 구현을 하고 나중에 useReducer()에 첫번째 인자로 선언한 함수 넣고 두번쨰는 기본값 넣어준다.

가장 큰 장점은 컴포넌트 업데이트 로직을 바깥으로 뺄 수있다 === 가시성 및 유지보수에 쉽다.

state와 dispatch 를 만드는데 (useState의 form, setForm 와 비슷한 모양새임) state는 현재 가리키고 있는 상태이고, dispatch는 액션을 발생시켜주는 함수이다  action 에는 switch문이 담겨있기때문에 정해져 있는 놈을 불러오면 됨~

또하나 중요한게 있슴다 useState에서 일일히 하나하나 상태를 관리하기 위해 선언했던 것을 useReducer을 이용해서 하나로 만들어버릴 수 있다는 점이 좋구만 기억합시다잉~ 

---

useContext

context API인가?? props drilling 얘기를 하고 있구만

리덕스를 배울때도 같은 원인이다

잔역데이터를 관리할 수 있게 해준다

1. 컨텍스트 객체를 만드는 createContext

2. 컨텍스트의 변화를 감지하는 consumer

3. 하위 컴포넌트에게 전달하는 consumer

 

구조를 알아보자

props 를 통해서 내려주는게 아니라 새로만든 컨텍스트로 외부에 접근해서 전달하는 것이다.

그 이후 컨텍스트에다가 component.provider를 적용을 하면된다 그리고 감싸주고 나머지 전달해주던 자식들도 다 props 지우고 컨텍스트로 데이터를 받아온다

어케 받아오누 useContext 를 선언한다 const data = useContext(Fanilycontext);

이렇게 받아와서 구조분해 쓰면 되겠구만 객체로 받아오는구나

 

props로 내려준 값을 쓴게 아니라 컨텍스트로 값을 받아온다는 것을 기억하자렌더링 문제가 있다 provider에서 제공한 value가 달라지면 싹 다 리렌더링된다 엄청 비효율적이기 때문에 메모이제이션이 필수가되겠다.

 

---

useRef 

useRef의 경우 저장공간으로서의 활용과 DOM요소에 접근하는 방법으로서의 활용 2가지 방법이 있다.

 

돔요소에 접근할 수 있게 한다

돔요소를 어딘가 저장해놓고 그것을 가져다 쓸 수 있게 해준다.

JS에서 접근할때에엔 queryselector라던가 이런걸로 접근하는데 react에서도 접근을 해야하는 경우가 있다개발을 하다보면 특정 돔을 선택해야하는 경우가 필요하다.

래퍼런스를 의미한다 참조 ref객체형태로 존재하는 ref 

키가 current고 밸류가 초기값으로 온다.

import "./App.css";
import { useRef } from "react";

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

// 결과는 {current : "초기값"}

ref.current로 접근해서 변경할 수 있다.

중요한 개념 : 이렇게 설정된 ref값은 컴포넌트가 계속 랜더링되도 unmoumt되기 전까지 유지가 된다.(컴포넌트가 죽기전까지 값을 유지한다)

그래서 저장공간으로서 돔요소에 접근하는 방식으로서 사용될 수 있다

state와 비슷한 역할을 하는게 저장공간으로서 역할을하는것 다만 state는 변화가 일어나면 랜더링을 한다 (함수가 다시그려진다는 소리)

ref에 저장된 값은 랜더링을 일으키지 않는다.

리랜더링이 꼭필요한 값은 state로 다루고 아니라면 ref로 다루자 외부적으로 티가 나는경우 눌렀을떄 카운트 올라가는 경우는 state로 써라ref는 객체이기 때문에 접근할때는 생각 한번 더 하고 접근해라함수로 빼는 연습을 많이 해라 객체지향적인 코드를 짜라 두개를 버튼으로 짜서 보면 확연히 차이가 난다 state로 짜서 만든 버튼은 누를때마다 숫자를 1씩증가시키는것을 보여준다 하지만 ref는 숫자가 증가하는 것을 보여주지 않지만 뒤에서는 계속 카운트가 올라가는 중이다.

 

DOM에 접근하는 예시idRef.corrunt.focus() 이런식으로 useEffect에 실행문을 주고 특정 input에다가 idRef를 준다면 포커스가 이동이 된다.

 

하나씩 늦는이유가 배치업데이트때문이구나

 

---

Custom Hook 

이건 그냥 책 참고하자

 

---

 

 

 

 

 

 

인자로 함수를 넣었을때 함수의 값을 넣었을 때 차이를 알아보자 setNumber(), setNumber, 1

 

onclick 쓸 때 왜 이거 인자를 함수로 전달해야하는가??? 그냥 setNumber()하는거랑은 무슨 차이가 있을까 찍어봐야겠구만