Hooks

//16.8 버전부터 useState 사용가능
import React, { useState } from "react";

// 함수형 컴포넌트

const Counter = () => {
  //useState에 0을 넣는 것 ==> 기본값을 0 으로 설정
  //useState() 호출후 반환하는 배열 ==> [상태값, 상태를 설정하는 함수]
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

export default Counter;

//// *** componentDidMount
useEffect(() => {}, [])
///// *** componentDidUpdate
useEffect(() => {}, [배열안에 검사하고 싶은 값 (현재 상태관리되고 있는 값 / props로 전달받은 값)])
///// *** componentUnMount, componentWillUpdate
useEffect(() => {}, return () => {});

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

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNicname] = useState('');

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


  const onChangeName = e => {
    setName(e.target.value)
  }

  const onChangeNickName = e => {
    setNicname(e.target.value)
  }

  return(
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickName}/>
      </div>
      <div>
        <b>이름: </b>{name}
        <b>닉네임: </b>{nickname}
      </div>
    </div>
  )
}

export default Info;

import React, { useReducer } from "react";

function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT':
    return { value: state.value + 1 }
    case 'DECREMENT':
    return { value: state.value - 1 }
    default:
    return state;
  }
}

const Counter_reducer = () => {
  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 Counter_reducer;

import React, { useState, useMemo, useCallback, useRef } 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 => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  }; // number혹은 list가 바뀌었을 때만 함수 생성



  //렌더링 성능 최적확: useMeomo
  //렌더링하는 과정에서 특정값이 바뀌었을 때만 연산 실행, (list배열의 내용이 바뀔때마다 getAverage함수 호출)
  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;

/// **** 컴포넌트 처음 렌더링 될 때
useCallback(() => {}, [])
/// **** number나 list값이 바뀌었을 때
useCallback(() => {}, [number, list])

import React, { useState, useMemo, useCallback, useRef } 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 inputEl = useRef(null);

// useCallback: 렌더링 성능 최적화, 이벤트 핸들러 함수 필요할 때만 생성
// 기존은 리렌더링 할때마다 함수 새로 생성...
// useCallback(생성하고 싶은 함수, 배열: 어떤 값이 바뀌었을 때 함수를 새로 생성해주어야하는지 명시)
  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []);  // 컴포넌트가 처음 렌더링 될 때만 함수 생성

  const onInsert = useCallback(e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
    // useRef로 만든 객체 안의 current값이 실제 엘리먼트
    inputEl.current.focus();
  }, [number, list]); // number혹은 list가 바뀌었을 때만 함수 생성 


  //렌더링 성능 최적확: useMeomo
  //렌더링하는 과정에서 특정값이 바뀌었을 때만 연산 실행, (list배열의 내용이 바뀔때마다 getAverage함수 호출)
  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;