React Hook

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

useState()

useState()는 Hook의 함수들 중 하나입니다. useState()를 사용하면 데이터 관리를 훨씬 편하게 할 수 있습니다.

import React, { useState } from 'react';

react에서 useState를 사용하기 위해 import 해줍니다.

• 버튼을 눌렀을 때 글자 update하기

// useState의 인자 'Hello'가 text에 들어갑니다
const [text, setText] = useState('Hello');

const updateText = () => {
	// setText가 글자를 업데이트 해줍니다. 
	setText('Bye');
};

return (
  <div className="App">
    <span>{text}</span>
    <button onClick={updateText}>Update</button>
  </div>
);

React에서 useState를 import 합니다. text변수에는 useState의 인자 값 'Hello'가 들어가고, setText 함수는 처음 인자 값에서 다른 값으로 업데이트 해줍니다.

form형식으로 useState() 사용하기

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const onSubmit = () => {
  alert('submitted');
};

return (
  <div className="App">
    {/* form형식으로 로그인 묶어줍니다 */}
    <form onSubmit={onSubmit}>
      <input 
        placeholder="Username" 
        value={username} 
        onChange={(e) => setUsername(e.target.value)}
      /><br />
      <input 
        placeholder="Password" 
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        /><br />
      <button type="submit">Login</button>
    </form>
  </div>
);

form형식을 사용하여 로그인 관련 태그들을 묶어줍니다. value값을 현재의 변수값으로 설정한 후에 onChange를 사용하여 이벤트 형식으로 value를 바꿔줍니다. form태그를 사용하면 버튼을 누르지 않고 엔터를 사용해도 submit 할 수 있습니다.

주의!

const onSubmit = (event) => {
	event.preventDefault();
  alert('submitted');
};

form이 submit을 할 때의 고유의 동작이 페이지를 refresh 시킵니다. 그것을 막기 위해 preventDefault 함수를 사용해줍니다.

Login form에서 id, password를 치고 Login 버튼을 누르게 되면 onSubmit event가 발생하면서 onSubmit 함수를 실행시키게 됩니다. onSubmit 함수 안에서 username과 password를 서버로 보내게 되고, 데이터베이스에서 username과 password가 맞는지 확인한 후, 일치하면 로그인을 할 수 있도록 응답을 보내주게 됩니다.

const onSubmit = (event) => {
	event.preventDefault();
  console.log(username, password);
};

이때 username과 password가 제대로 들어오는 지 확인하기 위해 console.log()를 사용해줍니다.

username과 password가 잘 들어오는 것을 알 수 있습니다.

useEffect()

useEffect()를 사용하면 컴포넌트가 렌더링 될 때마다 react에게 어떤 행동을 취하도록 요청할 수 있습니다.

import React, { useEffect } from 'react';

react에서 useEffect를 사용하기 위해 import 해줍니다.

• console.log()를 사용해 useEffect() 확인하기

useEffect(() => {
  console.log('effect');
})

console.log('rendering');

return (
  <div className="App">
    <h1>Kossie Coder</h1>
  </div>
);

처음에 컴포넌트가 렌더링 되면서 console창에 'rendering' 로그가 찍히고, 렌더링이 완료된 후 useEffect() 함수를 실행시켜서 'effect'가 console창에 기록되었습니다.

• state가 업데이트 될 때마다 계속 렌더링이 되는지 console.log()를 사용해 확인하기

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

useEffect(() => {
  console.log(count);
});

const increment = () => {
  setCount(count + 1);
};

return (
  <div className="App">
		{/* count를 하나씩 증가해가며 렌더링 확인 */}
    <button onClick={increment}>Click</button>
  </div>
);

state가 업데이트 될 때마다 useEffect() 함수가 실행되고, increment 함수가 count를 증가시킵니다. state가 변경될 때마다 console창에 숫자가 기록됩니다.

위의 사진은 Click 버튼을 5번 눌렀을 때의 console창입니다.

• array를 사용해 원하는 state만 변경하기

const [count, setCount] = useState(0);
const [number, setNumber] = useState(0);

useEffect(() => {
  console.log(count);
}, [count]);   // count에 대해서만 실행합니다

const increment = () => {
  setCount(count + 1);
};

return (
  <div className="App">
    <button onClick={increment}>Click1</button>
    <button onClick={() => setNumber(number + 1)}>Click2</button>
  </div>
);

원하는 state(count)가 변경될 때만 useEffect()를 실행시키고자 한다면, useEffect()의 두번째 인자에 array를 넣어주고 array안에 변경하고자 하는 state만 넣어주면 그 state만 변경됩니다.

⇒ Click1 버튼을 눌렀을 때만 useEffect가 실행됩니다.

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

count와 number 두 state에 대해서만 useEffect()를 실행하고 싶다면 array에 두 state를 넣어줍니다.

• 첫 렌더링을 할 때만 실행시키기

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

// 첫 렌더링 할 때만 실행됩니다
useEffect(() => {
  console.log('first rendering');
}, []);

useEffect()를 사용할 때 두 번째 인자 array를 비워두면 한 번만 실행할 수 있습니다.

array를 비워둔 useEffect()의 로그는 한 번만 찍히는 것을 알 수 있습니다.