react.js & node.js 5일차

Data Binding

 

우리가 앞에서 names 배열을 useState로 해준것을 보고 Data Binding이라고 부른다. 이는 곧 단방향 데이터 흐름(one-way data flow) 또는 단방향 바인딩(one-way binding)이라고 부른다. 데이터를 화면과 연결해주는 것이다.

 

반대로 vue.js는 양방향 바인딩이다. 즉 데이터가 바뀌어도 input이 바뀌고 input이 바뀌어도 데이터가 바뀐다. 이와 유사한것이 input에 사용했던 onChange와 value가 함께 사용된 부분이다.

 

useEffect

useEffect는 랜더링, 변수의 변화와 관련이 있다. useEffect는 실행하고 끝이다. useEffect는 두가지 인자를 넣는다. 첫번째 인자는 함수이다. 특정조건을 만족을 만족할때 함수가 실행된다.

두번째 인자를 넣지 않으면 랜더링이 될때마다 useEffect가 실행된다. useEffect는 여러개 만들어도 된다.

 

두번째 인자로는 배열이 들어간다. 빈배열이 들어갈때는 마운트(리액트 컴포넌트가 태초에 랜더링) 될 때만 실행된다.

 

세번째는 배열안에 있는 값이 바뀔때마다 함수가 실행된다. 이건 배열이기 때문에 감지하고 싶은 변수는 모두 넣으면 된다. 그러면 해당 변수가 변화할때 함께 실행된다.

뒷정리하기

 

cleanup함수, unmount(리액트 컴포넌트가 종료 될때) 실행되게끔 만들 수 있다. return 되는 부분을 보고 cleanup 함수라고 부른다.

그래서 lifecycle은

1. cleanup 함수 실행

2. name 변경

3. useEffect 함수 실행

순으로 진행된다.

 

1. REACT에 대해

위와같이 정의하면 REACT가 종료될때 unmount가 출력된다.

 

이를 테스트해보기 위해 위와같이 버튼을 눌러서 컴포넌트를 보이고 안보이고가 가능하게끔 만들었다. 그러면 컴포넌트가 사라질때 unmount가 출력될 것이다.

 

이렇게 쓰는 이유는 나중에 하게 될것인데 컴포넌트가 사용종료후에는 모든 정보를 지우고 사라져야 하기 때문에 그때를 대비해서 이러한 기능이 존재하는 것이다.

 

2. 변수에 대해

위와같이 작성하면 name값이 바뀌기 직전에 출려한번, 바뀌고나서 변경되었습니다.가 출력된다. 그야 이제 값이 바뀌니 지금의 값의 수명은 이 순간이 마지막인걸...

 

Redux Pattern

useReducer, useMemo, useCallback 등이 있는데 이건 지금 당장은 잘 안쓴다.

Redux에는 Action, Reducer, Store, View가 있다. View는 우리가 보는 화면(JSX)이다.

 

view는 store 정보로 출력하고 view에서 action이 일어난다. action이 dispatch가 실행이 된것이다. dispatch함수가 실행되면 reducer에 와서 어떤 action을 어떻게 취할지를 dispatch함수를 통해서 정보를 받아와 reducer가 실행시킨다. reducer은 그걸 통해서 새로운 store을 만들어 저장하고 그럼 store가 다시 view를 만드는 흐름이다.

 

useReducer

 

```

import React, { useReducer } from "react";

const reducer = (state, action) => {

  switch (action.type) {

    case "INCREMENT":

      return { value: state.value + 1 };

    case "DECREMENT":

      return { value: state.value - 1 };

    default:

      return state;

  }

};

const Counter3 = () => {

  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (

    <div>

      <p>

        현재 카운터 값은 <b>{state.value}</b>

      </p>

      <button

        onClick={() => {

          dispatch({ type: "INCREMENT" });

        }}

      >

        +1

      </button>

      <button

        onClick={() => {

          dispatch({ type: "DECREMENT" });

        }}

      >

        -1

      </button>

    </div>

  );

};

export default Counter3;

```

 

일단 코드를 위와같이 작성해보자.

 

해보니 위와같이 버튼을 누르면 값이 바뀐다.

 

이게 사실 useState와 기능은 동일하다. 이걸 Flux 패턴을 바탕으로 제작된다고 이야기 한다. 이걸 더 수정해서 바뀌는 값을 우리가 인자로 전달해줄 수 있다.

 

import React, { useReducer } from "react";

const reducer = (state, action) => {

  switch (action.type) {

    case "INCREMENT":

      return { value: state.value + action.number };

    case "DECREMENT":

      return { value: state.value - 1 };

    case "RESET":

      return { value: 0 };

    default:

      return state;

  }

};

const Counter3 = () => {

  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (

    <div>

      <p>

        현재 카운터 값은 <b>{state.value}</b>

      </p>

      <button

        onClick={() => {

          dispatch({ type: "INCREMENT", number: 5 });

        }}

      >

        +5

      </button>

      <button

        onClick={() => {

          dispatch({ type: "DECREMENT" });

        }}

      >

        -1

      </button>

      <button

        onClick={() => {

          dispatch({ type: "RESET" });

        }}

      >

        0

      </button>

    </div>

  );

};

export default Counter3;

그런데 리덕스도 하나의 라이브러리이고 요즘에는 훅이 더 중요해지다보니 사용량이 주는 추세인거 같다.

 

useMemo

리액트 컴포넌트는 새로 랜더링될때마다 그냥 선언된 변수는 초기화된다. 그래서 어떤값이 계산에 의해서 값이 정해진다면 그 리액트가 새로 랜더링될때마다 새로 계산이 된다. 그래서 계산을 특정상황, 어떤 값이 바뀔때만 그 계산을 다시 실행시키어줄때 useMemo를 사용하게 되는데 효율성에 관한 훅이라서 구지 useMemo를 쓰지않아도 되기는 하다. 하지만 나중에 프로그램이 커지고 비동기적 함수를 실행하면 그때마다 불필요한 요청이 올때 useMemo나 useCallback을 써야한다.

 

```

import React, { useState } from "react";

const getAverage = (numbers) => {

  console.log("평균값 계산 중...");

  if (numbers.length === 0) return 0;

  const sum = numbers.reduce((a, b) => a + b);

  return sum / numbers.length;

};

const Average = () => {

  const [list, setList] = useState([]);

  const [number, setNumber] = useState("");

  const onChange = (e) => {

    setNumber(e.target.value);

  };

  const onInsert = (e) => {

    setList([...list, parseInt(number)]);

    setNumber("");

  };

  return (

    <div>

      <input value={number} onChange={onChange} />

      <button onClick={onInsert}>등록</button>

      <ul>

        {list.map((value, index) => (

          <li key={index}>{value}</li>

        ))}

      </ul>

      <div>

        <b>평균값 : </b> {getAverage(list)}

      </div>

    </div>

  );

};

export default Average;

```

 

예를 들어 위와같이 코드가 있다고 하자. list에 저장된 값이 적다면 연산량이 적으니 상관없겠지만 나중에가서 값이 많아지면 문제가 생길 수 있다. 그래서 리스트가 바뀔때만 평균값이 바뀌도록 만들기 위해서 useMemo를 사용해서 list가 바뀔때마다 getAverage가 실행되도록 만들자.

 

그래서 위와같이 작성하니 연산수가 확준것을 확인할 수 있다. 이와 같이 useMemo는 변수 변화에 함수가 사용되도록 만드는 방법이다. 즉 랜더링과 상관없이 계속해서 변수를 담고 싶을때 사용한다. 최적화와 관련이 있다.

 

useCallback

어떤 값이 바뀔때에만 함수를 선언하고 싶을때 사용. 예를 들어서 onChange는 최초에만 생성하고 onInsert는 리스트가 바뀔때만 생성되도록 만들어보자.

이렇게하면 onChange는 최초에 mount 될때 생성된 이 함수를 계속 사용한다.

위와같이 선언해주면 number와 list가 바뀔때에만 실행된다. 만약 number, list를 넣지 않으면 최초의 number, list를 계속 기억해서 빈 값이 들어간다.

 

useRef

1. 직접 DOM에 접근하기

직접 html 돔에 접근하는 방법이다.

보통 위와같이 input에 ref를 걸고 inputEl을 걸어서 접근하겠다는 의미를 연결한다. 그리고 그 성분을 다른 함수에서 사용하는 방식으로 작동한다.

 

응용하면 이런게 있다.

 

2. 로컬 변수로 사용하기

랜더링에 상관없이 바뀌어야하는 값을 사용시에 사용한다.

예를 들어서 앞에서 보았던 nextId같은 경우 외부로 노출되는 값이 아니기 때문에 useRef로 정의해서 사용하는게 맞다. 이때 nextId 값을 바꾸기 위해서는 반드시 current를 사용하자.

 

정리해보면 useState가 기본 변수, 보여지는 변수인거고 useRef는 static 변수, 안보이는 변수 같은 개념이다.

 

마지막으로 useRef를 이용해서 클릭시 파일을 선택할 수 있게끔 만들어보았다.

 

위와같이 창이 열리고 파일을 선택할 수 있게 된다.