Hooks!

예전같았으면 리액트가 바로 생각났을텐데 ㅋㅋㅋㅋㅋㅋㅋㅋ 요즘엔 스우파봐서 아이키밖에 생각안남.. 아이키 좋아 ㅜㅜㅜ 스우파 안본지도 꽤됐넹 왜냐면 감정소비 넘 심함.. ㅜㅜ 아무튼 훅 최고

다시 돌아와서 사람들이 그렇게 말하는 훅훅훅훅 HOOKS! 에대해서 알아보장

은수의 관점에서 HOOKS! 를 사용하는 이유는 뭐다? (100% 내 주관)

1. 가독성
   리액트는 JSX문법을 쓰고 컴포넌트로 이루어져 있다. 컴포넌트 덩어리로 움직이려면 class 함수로 범주화하여 컴포넌트로 사용해야 하는데, 컴포넌트 내에서 사용하기 위해서는 this를 사용해 함수, state를 접근해야한다. 그럴경우 코드가 길어져 가독성을 떨어트린다.
2. 자유로운 코드 구성
   class 함수를 사용하면 render 함수로 한번 랜더링 해주어서 브라우저에 보여지게 되는데, 함수 컴포넌트를 사용할 경우 return으로 바로 브라우저에 요청해 그려진다. render함수를 돌지않고 return을 하기 때문에 자바스크립트 엔진에 부담이 덜해진다.

클래스 컴포넌트의 단점

• 로직의 재사용이 어려워진다. (class 부분적인 API 사용 및 state다루는 부분)
• 가독성이 떨어진다.

Hooks! 의 장점

• 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후 필요한 곳에 넣어주기만 하면 되기 때문에 로직의 재사용이 유연해 짐.
• 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결 됨.

HOOK이란?

Hook이란 함수 컴포넌트에서 React State와 생명주기 기능을 연동할 수 있게 해주는 함수이다. useState와 같은 내장 Hook들도 있고, 재사용 가능한 hook을 직접 만드는 것도 가능하다.

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

useState : state 관리

//useState 예시

const HookInputs = () => {
  const [value,setValue]= useState('');

  return (
    <>
    <input type="text" value={value} />
    <button >입력</button>
    </>
  )
}

export default HookInputs
  
 

useState() 동작원리

const MyReact = (function () {
    function useState(initialValue) {
        let _state = initialValue;

        function getState() {
            return _state;
        }

        function setState(value) {
            _state = value;
        }

        return [getState, setState];
    }

    function render(Component) {
        return Component();
    }

    return { useState, render };
})();

• initialValue= state초기값
• getState= state
• setState= 바뀌는 value
• useState될때마다 render됨

출처/ 참조

• https://it-eldorado.tistory.com/155 [Hooks의 동작원리]
• https://lannstark.tistory.com/114 [간결하게 정리됨.]
• https://bravenamme.github.io/2020/04/08/react-hook/ [Hooks 등장배경]
• https://sangcho.tistory.com/entry/ReactHooks%EC%9D%98%EB%B9%99%EC%82%B0 [나중에 읽을 훅 체크리스트]