[REACT] React 기본 Hooks

REACT v17 기준으로 작성된 글 입니다.

useState

• 리엑트의 근본, 리엑트에서 값 저장 용도로 사용한다. 
• 값을 할당 받고, 값과 변환 함수 ( Set ) 를 반환한다.
• State 값이 변하는 경우 렌더링이 발생한다, 즉 다시 그림을 그린다.
• 변환 함수 ( Set ) 은 콜백을 인자로 받아 기존 상태값을 얻을 수 있다.

기본 사용법

import React, { useState } from "react";

const App = () => {
	const [name, setName] = useState("");

	return (
		<div>
			<span> 내 이름은 { name } </span> 
		</div>
	)
}

return App;

여러 input 태그에 state 하나로 바인딩 하는 방법

import React, { useCallback, useState } from "react";

const Login = () => {
  const [form, setForm] = useState({
    id: "",
    pw: "",
  });

  const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setForm((prevState) => {
      return {
        ...prevState,
        [e.target.name]: e.target.value,
      };
    });
  }, []);

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
      <form onSubmit={onSubmit}>
          <div>
              <input value={form.id} name="id" onChange={onChange} />
              <input type="password" value={form.pw} name="pw" onChange={onChange} />
          </div>
          <div>
            <button type="submit">
              로그인
            </button>
          </div>
      </form>
  );
};

export default Login;

useRef

useRef 는 크게 두가지 방법으로 사용된다. 

• 컴포넌트 변화와 상관없는 변수 값을 가지는 경우
• React DOM 객체를 참조할 경우

import React, { useRef } from "react";

const App = () => {
	const isBoolean = useRef(false);
	const refDom = useRef<HTMLInputElement>(null);

	const onBtn = () => {
		refDom.current = true;
	}

	return (
		<div> 
			<input ref={refDom} />
			<button onClick={onBtn}>버튼</button>
		</div>
	)
	

}

export defualt App;

useEffect

• Class React 시절의 componentDidMount , shouldComponentUpdate , componentWillUnmount를 묶어서 표현하는 훅 이다
• 첫번째 인자로 콜백 함수를, 두번째 인자로 배열을 받는다.
• 리엑트 실행주기와 가장 연관도가 높으며 해당 내용을 이해해야 적용이 수월하다. 

componentDidMount 방식

• 컴포넌트가 랜더링 된 이후 처음 한번 실행되는 이펙트, 주로 서버 통신이나, 랜더링 후 필요한 작업을 작성한다. 

useEffect(() => {
	console.log("component did mount !!");
}, []);

shouldComponentUpdate 방식

• 참조하는 값의 변화에 따라 재 랜더링 후 실행될 함수
• shouldComponentUpdate 와의 차이는 최초 랜더링시에도 이펙트가 발생한다.
  따라서 Update 시에만 발생할 함수를 구현 할 경우 추가적인 조작이 필요하다. (2번째 코드)

useEffect(() => {
	console.log(" update !! ");
}, [ value ]);

const [value, setValue] = useState(100);
const isInit = useRef(false);

useEffect(() => {
  if(!isInit.current){
     isInit.current = true;
  }else{
     ...
  }
}, [ value ]);

componentWillUnmount 방식

• 해당 컴포넌트가 화면에서 제거 되었을 때 발생하는 이펙트
• return 함수 내부가 실행된다.

useEffect(() => {
	return () => {
		console.log(" component unmount !! ");
	}
}, [])

useReducer

• useReducer 는 첫번째 인자로 액션과 상태를 처리하는 reducer 를 두번째 인자로 초기 값을 받는다.
• useReducer 가 리턴한 state 와 dispatch 를 이용해 상태관리한다.
• dispatch 로 타입과 액션값을 가진 객체를 전달하여 상태관리

import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RENAME = 'RENAME';

const reducer = (state, action) => {
    switch(action.type){
        case INCREMENT: 
            return {
                ...state,
                age: state.age + 1 
            };
        case DECREMENT:
            return {
                ...state,
                age: state.age - 1
            };
        case RENAME:
            return {
                ...state,
                name: action.name
            };
        default :
            return state;
    }
}

const initialState = {
    age: 20,
    name: 'default'
}


const Test = () => {

    const [ state, dispatch ] = useReducer(reducer, initialState);

    const upClickHandler = e => {
        dispatch({type: INCREMENT});
    }

    const downClickHandler = e => {
        dispatch({type: DECREMENT});
    }

    const ChangeHandler = e => {
        dispatch({type: RENAME, name: e.target.value });
    }

    return(
        <div>
            <button onClick={ upClickHandler }>증가</button>
            <button onClick={ downClickHandler }>감소</button>
            <input type="text" value={state.name} onChange={ ChangeHandler } />
            <p>나이: { state.age }</p>
            <p>이름: { state.name }</p>
        </div>
    )
}

export default Test;

useCallback & useMemo

불필요한 리랜더링을 막기위한 최적화 hooks 로 둘은 약간 차이가 존재한다. 

useCallback

• 함수 그 자체를 Memorize 하기 위한 기능
• 주로 Event Handler 에 적용된다.

const onBtn = useCallback(() => {
	alert("btn");
}, []);

useMemo

• 함수 연산의 결과값을 Memorize 하기 위한 기능

---

There might be incorrect information or outdated content.