React hooks1

React hooks

기존 리액트의 함수형 컴포넌트는 stateless component였기 때문에 state사용이나 라이프 사이클의 사용이 제한되었습니다. 그래서 state가 있는 component를 사용해야 했습니다.

하지만 React 16.8.0에서 공식적으로 React hooks를 release하면서 더욱 다양한 용도로 함수형 컴포넌트를 사용할 수 있게 되었습니다. 대표적인 hook 함수 몇가지를 적어보려고 합니다.

useState

useState 는 함수형 컴포넌트에서 state를 사용할 수 있게 해 줍니다. 기본적인 hook 함수들은 기본적으로 react에서 import해서 사용할 수 있습니다.

useState의 기본 사용 형태는 다음과 같습니다.

const [state, setState] = useState(initialState);

state 는 state의 값, setState 는 state를 변경시켜주는 함수, initialState 는 초기 state값을 의미합니다.

setState는 아래와 같이 사용합니다.

setState(newState)

import React, {useState} from 'react';

const Example = () => {
  //count라는 state와 함께 count state를 변경시켜주는 setCount 함수가 만들어집니다. 
  //setCount는 기존 class component의 setState({count : xx}) 와 같은 역할을 합니다
  const [count, setCount] = useState(0);
  
  return (
	<div>
		<p>Count is {count}</p>
		<button onClick={() => setCount(count + 1)}>
		Increase Count
		</button>
    	</div>
  )
}

export default Example;

위 예제는 Increase Count 버튼을 클릭하면 count를 1씩증가시켜주면서 component를 rerender해주는 예제입니다. state는 number 외에도 모든 형태로 사용이 가능합니다.

import React, {useState} from 'react';

const Example = () => {
  const [profile, setProfile] = useState({});
  const {name, phone} = profile;
  const handleChange = (e) => {
    setProfile({
      ...profile,
      [e.target.name] : e.target.value
    })
  }
  return (
  	<div>
		<p>My name is {name}. Phone : {phone}</p>
		<input name="name" placeholder="name" onChange={handleChange}/>
		<input name="phone" placeholder="phone" onChange={handleChange}/>
    	</div>
  )
}

export default Example;

위처럼 object형태로도 활용할 수 있습니다.

useEffect

개인적으로 정말 좋아하는 hook입니다!! useEffect는 특정 값이 변동되었을 때에만 특정 행동을 할 수 있도록 만들어주는 hook입니다.

기본적으로 class component의 componentDidMount + componentDidUpdate의 역할을 수행한다고 보면 됩니다.

사용법은 아래와 같습니다.

useEffect(updateFunction[, listenValuesList])

updateFunction 은 useEffect로 실행시킬 함수가 들어가 자리입니다. listenValuesList 는 updateFunction 을 언제 실행 시킬 지 정하는 배열값입니다. component가 업데이트 된 후에 listenValuesList 변경되었다면 updateFunction을 실행합니다.

listenValuesList를 빈 배열로 두면 class의 componentDidMount와 같은 역할을 하며 첫 render때에만 실행됩니다. listenValuesList를 넣지 않으면 매 render마다 실행됩니다.

…계속작성