[React] useEffect

리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행할 수 있는 Hook

 

사용 전 import 

import React, { useEffect } from 'react';

 

const Mypage = () => {
  const [value, setValue] = useState('');
  const [nickname, setNickname] = useState('');
  
  useEffect(() => {
    console.log({
      name,
      nickname,
  });
  
  // 입력 값 가져오기
  const onChangeName = e => {
    setName(e.target.value);
  };
  const onChangeNickname = e => {
    setNickname(e.target.value);
  };
  
  return(
    <div>
      // name 
      <input value={name} onChange={onChangeName} />
      // nickname
      <input value={nickname} onChange={onChangeNickname} />
    </div>
  )
};

input 태그에 입력할 때 마다 console 이 찍히게 됨

예시

 

 

 

원하는 값이 업데이트 될 때만 실행

useEffect(() => {
  console.log(name);  
}, [name]);

input 태그에 값을 넣었지만

콘솔에는 name의 값만 찍힘