🔮 React - 8. Hook

Hook

• 리액트 버전 16.8에 새로 도입된 기능 입니다.
• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있도록 합니다.
• Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수 입니다.

⭐️ useState

• useState()는 리액트에서 상태(state)를 관리하기 위해 제공되는 hook 입니다.
• useState()를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있으며, 상태가 변경될 때마다 컴포넌트가 자동으로 다시 렌더링 됩니다.
• useState()는 배열 형태로 변환되며, 첫 번째 요소는 '현재 상태'이고, 두 번째 요소는 '상태를 변경하는 함수' 입니다. 상태를 변경하는 함수는 자바의 Setter함수와 비슷한 역할을 하며, 새로운 상태를 인자로 받아 컴포넌트를 다시 렌더링 합니다.

useState 기본

const Usestate = () => {
  const [value, setValue] = useState(0); // 초기값을 0으로 설정
  
  return (
    <>
      <p>현재 카운트 값은 <b>{value}</b></p>
      <button onClick={() => setValue(value + 1)}>증가</button>
      <button onClick={() => setValue(value - 1)}>감소</button>
    </>
  );
}

export default Usestate;

🐢 '증가' 버튼을 클릭할 때 마다(onClick()) value 값을 1 증가 시킨 후 다시 렌더링 해라.(setValue(value + 1))

🐢 '감소' 버튼을 클릭할 때 마다(onClick()) value 값을 1 감소 시킨 후 다시 렌더링 해라.(setValue(value - 1))

연습문제 - 명함 출력하기

✏️ 이름, 직책, 회사명, 회사주소, 이메일, 전화번호를 입력 받아 명함 형태로 출력하기

import React, { useState } from 'react';

// 7. 화면에 출력할 명함 컴포넌트 만들기
const NameCard = ({member}) => {

  return (
    <>
      <h3>명함 정보 출력</h3>
      <p>이름 : {member.name}</p>
      <p>직책 : {member.position}</p>
      <p>회사명 : {member.company}</p>
      <p>주소 : {member.address}</p>
      <p>이메일 : {member.email}</p>
      <p>핸드폰 : {member.phone}</p>
    </>
  );
}

const UserState = () => {
  const [member, setMember] = useState({ // 1. 명함 정보 저장을 위한 객체 리터럴 생성
    name:"", 
    position:"", 
    company:"", 
    address:"", 
    email:"", 
    phone:""
  });
  
  const [submit, setSubmit] = useState(false);  // 2. 제출을 누르기 전까지는 안나오게 하려고 boolean 타입으로 설정
  
  // 3. member 객체(위에 빈 공간의 객체)를 펼치고, name에 이벤트가 일어난 값을 넣는 것 - 다른 항목 이하 동일
    // 이벤트 핸들러: onChange, onClick ...를 이용해서 값을 받아오기
  const onChangeName = (e) => setMember({...member, name: e.target.value});
  const onChangePosition = (e) => setMember({...member, position: e.target.value});
  const onChangeCompany = (e) => setMember({...member, company: e.target.value});
  const onChanageAddress = (e) => setMember({...member, address: e.target.value});
  const onChangeEmail = (e) => setMember({...member, email: e.target.value});
  const onChangePhone = (e) => setMember({...member, phone: e.target.value});

  // 4. 값을 입력하고 제출 버튼을 눌렀을 때 submit 상태를 true로 변경
  const onSubmit = () => {
    setSubmit(true);
  }

  // 5. 위에 만든 것들을 적절한 위치에 넣기
  return (
    <>
      <h1>회원 정보</h1>
      <input type="text" placeholder='이름' value={member.name} onChange={onChangeName}/><br />
      <input type="text" placeholder='직책' value={member.position} onChange={onChangePosition}/><br />
      <input type="text" placeholder='회사명' value={member.company} onChange={onChangeCompany}/><br />
      <input type="text" placeholder='주소' value={member.address} onChange={onChanageAddress}/><br />
      <input type="text" placeholder='메일' value={member.email} onChange={onChangeEmail}/><br />
      <input type="text" placeholder='핸드폰' value={member.phone} onChange={onChangePhone}/>
      <button onClick={onSubmit}>제출</button>
      
      {/* 6. 컴포넌트 넣어서 조건부 렌더링 */}
      {/* member={member} <= member는 props 이름이라 임의로 설정 가능, {member}는 객체 리터럴 이름 */}
      {submit && <NameCard member={member}/>}
    </>
  );
}

export default UserState;

⭐️ useEffect

• React 함수형 컴포넌트에서 '생명주기 메소드를 대체'하는 React hook 입니다. (필수 사용)
  🐢 생명주기? : 화면에 나타났다가 사라질 때까지 일련의 과정
• useEffect는 1) 컴포넌트가 렌더링 될 때마다 특정 동작을 수행하거나, 2) 특정 상태가 업데이트 될 때마다 동작을 수행합니다.
• 첫 번째 인자로 콜백 함수를 받고, 이 콜백 함수는 컴포넌트가 마운트(화면에 그려질 때) 되거나 언마운트(화면에서 사라지는) 될 때, 그리고 의존성 배열에 전달된 상태가 변경 될 때마다 실행 됩니다.
• 두 번째 인자로 의존성 배열이 들어갑니다. 의존성 배열이 빈 배열이면 useEffect는 컴포넌트가 마운트 될 때 한번만 실행 됩니다.

useEffect 안에는 서버에 보낼 명령을 작성함. (axios)
의존성 배열 : 비교는 빠른 속도를 위해 '주소'만 비교하여 달라졌으면 렌더링 한다. (불변성의 법칙)

⭐️ useState랑 useEffect를 같이 넣으면 무한루프에 빠질 수 있으므로 조심.

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

const UseEffectInfo = () => {
  const [name, setName] = useState(""); // 이름이 바뀔 때마다 화면을 렌더링 하기 위한
  const [nickname, setNickname] = useState("");

  useEffect(() => {
    console.log("렌더링이 완료 되었습니다.");
    console.log(name, nickname);
  }, []); 

  const onChangeName = e => setName(e.target.value);
  const onChangeNickname = e => setNickname(e.target.value);

  return (
    <>
      <div>
        <input type="text" value={name} onChange={onChangeName} />
        <input type="text" value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <p>이름은 <b>{name}</b></p>
        <p>닉네임은 <b>{nickname}</b></p>
      </div>
    </>
  );
}

export default UseEffectInfo;

특정 값이 업데이트 될 때만 실행하고 싶을 때

• useEffect() 의 두번째 인자로 전달되는 배열 안에 검사하고자 하는 값을 넣으면 됩니다.
• 배열 안에는 useState를 통해 관리하고 있는 상태 값을 넣어도 되고, props로 전달받은 값을 넣어도 됩니다.

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

const UseEffectCnt = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]); // count 값이 바뀔 때마다 콜백함수 실행
  // useEffect는 useState와 별개로 실행됨. 화면이 그려진 후 의존성 배열의 값이 바뀔 때 실행.

  return (
    <>
      <p>You Clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me!</button>
    </>
  );
}

export default UseEffectCnt;

시간 업데이트 하기

• clearInterval() 함수는 JavaScript에서 제공하는 함수로, setInterval() 함수로 생성한 인터벌을 멈추게 합니다.

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

const UseEffectClock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // 언마운트 되면 interval을 해제
    return() => clearInterval(interval);
  }, []);

  return (
    <>
      <h1>현재 시간은 {time.toLocaleTimeString()}</h1>
    </>
  );
}

export default UseEffectClock;

useReducer

• useReducer는 상태 관리를 위해 사용됩니다.
  useState와 달리, useReducer는 복잡한 로직을 가진 상태들을 관리하는 데에 유용합니다.
• 첫 번째 인자는 '상태 업데이트를 처리하는 함수'로서 "reducer"라고 불립니다.
  두 번째 인자는 '초기 상태' 입니다. 이 함수는 현재 상태와 액션(action) 객체를 받아서 새로운 상태를 반환 합니다.
• useReducer를 사용하면 dispatch라는 함수를 사용하여 상태를 업데이트 할 수 있습니다.
• dispatch 함수는 액션 객체를 받고, 이 액션 객체는 상태를 업데이트 할 때 필요한 정보를 포함하고 있습니다.

import React, { useReducer } from "react";
  // state : 현재 상태
  // dispatch : 상태를 업데이트하는 함수
  // reducer : 개발자가 외부에 만들어야 하는 함수
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 UseReducerCnt = () => {
  const [state, dispatch] = useReducer(reducer, {value:0});

  return (
    <>
      <p>현재 카운트 값은 <b>{state.value}</b></p>
      <button onClick={() => dispatch({type: "INCREMENT"})}>+1</button>
      <button onClick={() => dispatch({type: "DECREMENT"})}>-1</button>
    </>
  );
}

export default UseReducerCnt;

위 코드는 useState로 사용할 수도 있습니다.
따라서, 복잡하지 않으면 useState에 비해 큰 이점은 없음.
Redux와 결합해야 이점이 있는데 그마저도 Context API로 대체해도 됨

⭐️ useMemo

• 컴포넌트의 성능을 최적화하기 위해 사용됩니다.
• Memo는 "memorized"를 의미하며, 이전에 계산한 값을 재사용한다는 의미를 가지고 있습니다.
• 컴포넌트에서 렌더링하는 동안, 컴포넌트의 상태나 props가 변경되면 해당 컴포넌트와 하위 컴포넌트들이 다시 렌더링 됩니다.
  이러한 불필요한 렌더링은 성능 문제를 야기할 수 있습니다. 이러한 이유로 useMemo를 사용하여 최적화 합니다.
• useMemo(계산하는 함수, 의존성 배열)

일반적인 구현 방식

• 일반적인 구현 방식으로 작성할 경우, Input 내용이 수정 될 때마다 getAverage 함수가 호출됩니다.
• input 내용이 바뀔 때마다 ...즉 리렌더링 할 때마다 평균값을 계산하는 것은 불필요한 일 입니다.

import { useState } from "react";

const getAverage = numbers => {
    console.log("평균값 계산 중");
    if(numbers.length === 0) return 0;
    // 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.
    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 => {
        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>
            <div>
                <b>평균값 : </b> {getAverage(list)}
            </div>
        </div>
    );
};
export default Average;

useMemo를 사용하는 방식

• useMemo는 두 개의 인자를 받습니다.
  첫 번째 인자는 캐시할 값을 계산하는 함수이고, 두 번째 인자는 의존성 배열 입니다.
• 의존성 배열은 useMemo가 언제 캐시된 값을 다시 계산해야 하는지 결정하는 데 사용됩니다.
• 의존성 배열에 있는 값이 변경되지 않으면 useMemo는 이전에 캐시된 값을 반환하고, 값이 변경되면 새로운 값을 계산합니다.
  (즉, 아래 예제 코드에서 list 배열이 변경될 때마다 getAverage 함수가 다시 실행 됩니다.
  list 배열이 변경되지 않은 경우에는 이전에 계산된 값을 재사용 합니다.)

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

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

  const onChange = e => setNumber(e.target.value);
  const onInsert = () => {
    // 현재 입력 받은 숫자를 기존의 리스트에 추가(concat으로 추가 했으므로 새로운 배열이 생성됨. 
    // 👉 불변성의 원칙
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  }

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

  const avg = useMemo(() => getAverage(list),[list]);

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

export default Average;

useCallback

• useCallback은 useMemo와 상당히 비슷한 함수 입니다.
• 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하며, useCallback을 사용하면 만들어놨던 함수를 재사용 할 수 있습니다.

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

const getAverage = numbers => {
    console.log("평균값 계산 중");
    if(numbers.length === 0) return 0;
    // 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.
    const sum = numbers.reduce((a, b) => a + b);
    return sum / numbers.length;
};

const Average = () => {  // 컴포넌트 이름은 대문자
    const [list, setList] = useState([]);
    const [number, setNumber] = useState('');

    const onChange = useCallback(e => {
        setNumber(e.target.value);
    }, []); // 빈 배열을 넣으면 처음 렌더링될 때만 함수 호출

    const onInsert = useCallback(() => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('');
    }, [number, list]);

    const avg = useMemo(() => getAverage(list), [list]);

    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> {avg}
            </div>
        </div>
    );
};
export default Average;

useRef

• 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해줍니다.
• useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current를 가리킵니다.

import { useState, useMemo, useCallback, useRef } from "react";

const getAverage = numbers => {
    console.log("평균값 계산 중" + numbers);
    if(numbers.length === 0) return 0;
    // 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.
    const sum = numbers.reduce((a, b) => a + b);
    return sum / numbers.length;
};

const Average = () => {  // 컴포넌트 이름은 대문자
    const [list, setList] = useState([]);
    const [number, setNumber] = useState(0);
    const inputEl = useRef(null);

    const onChange = useCallback(e => {
        setNumber(e.target.value);
    }, []); // 빈 배열을 넣으면 처음 렌더링될 때만 함수 호출

    const onInsert = useCallback(() => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber(0);
        inputEl.current.focus();
    }, [number, list]);

    const avg = useMemo(() => getAverage(list), [list]);

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