React - React Hook & 장점

React Hook?

 

React Hook은 React 16.8에 새로 추가된 기능으로 Hook은 class를 작성하지 않아도 함수 컴포넌트 내부에서 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

 

함수형 컴포넌트는 React의 state와 생명주기 메소드 사용이 불가능하여 위에서 전달한 데이터를 간단히 출력하는 역할에 그쳤습니다. 하지만 React Hook의 개발로 함수형 컴포넌트 또한 state와 생명주기 메소드 사용이 가능해졌습니다.

 

 

대표적인 React Hook

useState

 

함수형 컴포넌트 내에서도 state를 활용할 수 있도록하는 React Hook입니다.

useState에 전달되는 인자 1개는 초기 state값이고 useState는 2개의 인자를 반환합니다.

 

function sampleFunction() {
    const [age, setAge] = useState(30);
}

 

반환되는 첫 번째 인자는 현재 state값, 두 번째 인자는 state를 변경할 수 있는 setState 메소드입니다. state를 안전하게 변경하기 위해서는 반환된 setState 메소드를 이용해 state값을 변경해야합니다.

 

useEffect

 

함수형 컴포넌트 내에서도 useEffect를 통해 생명주기 함수를 사용할 수 있습니다. 

 

React의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 기능을 한다.

 

function sample() {

    const [count, setCount] = useState(0);
    
    // componentDidMount, componentDidUpdate와 비슷하다.
    useEffect( () => {
    	document.title = `You clicked ${count} times`;
    });
    
}

 

 

React Hook 장점

 

• 코드가 간결해진다.
• 가독성이 좋아진다.
• 많은 라이브러리들도 훅으로만 나오고 있다.
• Wrapper 컴포넌트 양 감소
  • 공통적으로 적용하는 코드를 wrapper로 감싸서 작성하는데 이럴 경우 wrapper 컴포넌트가 너무 많은 wrapper hell이 발생할 수 있다. React Hook으로 wrapper hell 문제를 해결할 수 있다.

 

 

출처 :https://ko.legacy.reactjs.org/docs/hooks-overview.html