Hook이란? ( useState, useEffect, useContext )

---

1. Hook

Hook 이란 함수 컴포넌트에서 상태관리 및 라이프사이클과 관련된 작업을 사용할 수 있도록 하는 리액트의 API이다.

 

이전에는 클래스 컴포넌트에서만 React의 라이플 사이클을 관리하고 사용할 수 있었는데 Hook의 등장으로 함수 컴포넌트 에서도 같인 기능의 작업을 수행할 수 있게 되었다.

 

React에서 제공하는 Hook중 useState, useEffect, useContext 등을 알아보자. 

 

 

---

1.1. useState

 

상태를 관리하기 위해 사용되는 것으로 초기값을 인자로 받으며,

 

배열 형태로 현재 상태값과 해당 상태값을 업데이트 하는 함수를 반환한다. 

예제

      

      

      

    
    

      <javascript />
    
export default function Home() {
	//useState를 이용하여 초기 값을 설정함
  const [count, setCount] = useState(12);
  const [step] = useState(3);

	//변수를 setCount로 변경하고 지정함 
  const handleIncrement = () => {
    setCount((count) => count + step);
  };

  const handleDecrement = () => {
    setCount((count) => count - step);
  };

 

 

1.2. useEffect

 

컴포넌트가 랜더링 된 후 (즉, DOM이 업데이트 된 이후)에 실행되는 함수로, 모든 랜더링시에 useEffect가 실행된다. 하지

 

만 의존성 배열(dependency array)를 이용하여 특정 State나 Props값이 변경될 때만 실행되도록 조정할 수 있다. 

 

      

      

      

    
    

      <javascript />
    
function Example() {
  const [count, setCount] = useState(0);

  // useEffect를 사용하여 count 상태값이 변경될 때마다 실행되는 효과를 만듬
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // count 값이 변경될 때만 실행

  return (
  		....
 );

 

이처럼 useEffect를 이용하여 count의 값이 변경될때마다 document.title값이 변경되는 듯. 업데이트 하는 효과를 만드는

 

형식으로 사용한다. userEffect 마지막에 ,[count] 로 보이는 의존성 배열 덕분에 "count" 값이 변경될 때만 실행된다.

 

 

 

1.3. useContext

 

useContext는 컴포넌트간 데이터를 쉽게 전달하도록 도와준다. 

 

React.createContext()로 생성한 context 객체를 이용하여 사용되며, 'useContext' 를 호출할 때 , 해당 컨텍스트 객체를

 

인자로 전달하면 현재 컨텍스트 값을 반환한다. 

 

      

      

      

    
    

      <javascript />
    
// createContext를 사용하여 컨텍스트 객체를 생성
const MyContext = React.createContext();

function MyComponent() {
  // useContext를 사용하여 현재 컨텍스트 값을 가져옴
  const contextValue = useContext(MyContext);

  return <p>{contextValue}</p>;
}

function App() {
  return (
    // MyContext.Provider를 사용하여 하위 컴포넌트에 컨텍스트 값을 전달
    <MyContext.Provider value="Hello World">
      <MyComponent />
    </MyContext.Provider>
  );
}

 

React.createContext 를 사용하여 만든 'MyContext' 변수를 이용하여 하위 컴포넌트에 context값을 전달할 수 있었다.