[React] 리액트 State Hook과 Effect Hook

🎯 State Hook과 Effect Hook

📝 State Hook

const App = () => {
    // 일반적인 useState 사용법
    const [state이름, setState이름] = useState(초기값)
}

• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다.
• 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다.
• state는 읽기 전용이므로 직접 수정 금지!!!!
• state를 변경하기 위해서는 setState를 이용
• state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다.

 

const App = () => {
    const [title, setTitle] = useState("")

    // State를 변경할 값을 직접 입력
    setTitle("Hello")

    // 또는 현재 값을 매개변수로 받는 함수 선언
    // return 값이 state에 반영됨
    setTitle((current) => {
        return current + "World";
    })
}

• state를 변경하기 위해서는 setState 함수에 직접 값을 입력하거나 현재 값을 매개변수로 받는 함수를 전달한다.
• 이때 함수에서 return 되는 값이 state에 반영된다.

 

📝 Effect Hook

const App = () => {
    useEffect(EffectCallback, Deps?)
}

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
  • side effect는 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다.
  • 어떠한 값이 변경될 때마다 내가 설정한 함수가 실행된다.
• Effect Hook은 클래스형 컴포넌트의 생명주기 메소드인 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.
• 컴포넌트가 최초로 렌더링 될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.
• Deps : 변경을 감지할 변수들의 집합(배열)
• EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수

 

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

    useEffect(() => {
        console.log('버튼을 ${count}회 클릭했습니다.')
    }, [count]) // count의 값이 변경 될 때마다 실행되는 함수

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>클릭하세요</button>
        </div>
    )
}

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
• 컴포넌트가 최초로 렌더링 될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.

 

📝 Effect Hook으로 컴포넌트의 생성/소멸 시의 로직

import React, { useState } from 'react';
import Greeting from './components/Greeting';

function App() {
  const [isCreated, setIsCreated ] = useState(false);

  const handleClick = () => {
    setIsCreated(!isCreated);
  }

  return (
    <div className="App">
        <button onClick={handleClick}>컴포넌트 생성/제거</button>
        {isCreated && <Greeting />}
    </div>
  );
}

export default App;

import React, { useEffect } from 'react';
const Greeting = () => {
    useEffect(() => {
        // State가 변경될 때, 컴포넌트를 렌더링할 때
        console.log("컴포넌트가 생성되었습니다.");

        // 컴포넌트를 재 렌더링 하기 전에, 컴포넌트가 없어질 때 실행해줄 함수
        return () => {
            console.log("컴포넌트가 소멸되었습니다.");
        }
    }, []);

    return <h1>안녕하세요.</h1>

}

export default Greeting;

• Effect Callback 함수 내에서 return 해주는 또 다른 함수가 Effect의 종료 시에 호출되기 때문에 이는 곧 컴포넌트의 소멸 단계에 호출이 되는 함수라고 할 수 있다.
• useEffect의 이펙트 함수 내에서 다른 함수를 return 할 경우 state가 변경되어 컴포넌트가 다시 렌더링 되기 전과 컴포넌트가 없어질 때(Destroy) 호출할 함수를 지정하게 된다.
• 컴포넌트가 생성될 때 최초로 한 번은 실행되기 때문에 Deps에 아무것도 안 넘겨주었다는 것은 컴포넌트가 실행될 때 한 번만 실행해줘!
• 즉, Deps를 지정하지 않더라도 컴포넌트의 생성/소멸 단계에서 Effect Callback 함수가 호출된다.