[리액트] 알고쓰자 React Hook

1. useState

함수형 컴포넌트에서 상태(state)를 관리해야 하는 일이 있을때 사용한다.
배열을 리턴하는데 첫번째 원소는  value, 두번 째 원소는 setter를 반환한다. hook에 파라메터로 넣는 것은 초기 값이다.

import React, { useState } from 'react';

const [value, setValue] = useState(0); //초기값 0

2. useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있다.

import React, { useEffect } from 'react';

useEffect(()=>{
	//컴포넌트 렌더링시에 수행하고 싶은 작업
	console.log('렌더링');
},[]);

두번째 인자는 배열을 받는다. 이는 특정 값이 업데이트 될때만 useEffect를 실행하도록 할 수있다.

import React, { useEffect } from 'react';

useEffect(()=>{
	console.log('이름이 바뀌었어요!');
},[name]); //name의 값이 변할때마다 useEffect에 정의한 함수가 실행된다.

 

3. useContext

context 객체(React.createContext 에서 반환된 값)을 받아 context의 현재 값을 반환한다.

 

원래는 자식 컴포넌트와 props를 공유하려면 createContext로 Context를 만들고 Provider를 통해서 전달해야한다. 그러나 2중 3중으로 전달해야할 경우가 생기면 코드가 길어지고 난잡해진다.
useContext를 사용하면 이런 복잡한 구조를 해결해 줄 수 있다.

/*TestContextProvider*/
import {createContext, useState} from 'react'

//conetext 생성
export const TestContext = createContext({
 test: '',
 testHandler: (name:string) =>{}
});

//Context Provider 정의
export function TestContextProvider({ children }: { children: React.ReactNode }) {
  const [value, setValue] = useState('');
   
  return (
    <TestContext.Provider value={{test:test, testHandler:setValue}}>
        {children}
    </TestContext.Provider>
  );
}

/*App*/
import TestContextProvider from './TestContext'

const App =()=>{
 return (
	//TestContextProvider 로 App을 감싸줌
	<TestContextProvider>
         <div className='App'></div>
    </TestContextProvider>
  )
}

TestContextProvider로 App을 감싸줌으로써 App내부에 있는 자식 요소에서 useState를 통해 언제든지 Test Context를 가져올 준비가 됨.

import {useContext} from 'react';
import {TestContext} from './TestContext'

const childComponent = () =>{
 const {test, testHandler} = useContext(TestContext);//아주 쉽게 Context정보를 가져올 수 있다.

 return <div></div>
}

export default childCompnenet;

 

4. useReducer

reducer는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는 함수이다. 

function reducer(state, action){
	return {...}
}

const initialState = ;

function reducer(state, action){
	//action type에 따라 다른 작업 수행
	switch(action.type){
		case "Login":
			return {
				jwt: action.jwt,
				user: action.user
			}
		case "LOGOUT":
			return {
				jwt: undefined,
				user: undefined
			}
		default:
			throw new Error("Unhandled action");
	}
}

const Auth = () =>{
		const [state, dispatch] = useReducer(reducer, initialState);
}

첫번째 파라미터는 리듀서 함수, 그리고 두번째 파리미터는 해당 리듀서의 기본 값이다. 

useReducer는 state값과 dispatch 함수를 리턴하는데 state는 현재 핸들링하는 상태 값이고 dispatch는 액션을 발생시키는 함수이다 즉 dispatch(action) 으로 리듀서 함수를 실행 시킬 수 있다.

useReducer를 사용했을때의 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 꺼낼 수 있다는 점이다. 

그래서 Context와 함께 사용하면 어플리케이션 어디에서든지 state값을 업데이트 할 수 있다.