[Nomad Coder] 리액트 Hooks 강의 정리

Hooks란?

React 버전 16.8부터 React 요소로 새로 추가된 기능이다.
기존 Class 기반의 코드가 아니어도 상태값 등을 사용해 함수형 방식의 프로그래밍을 할 수 있다.

또한, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있게 된다. 또한 이러한 로직의 추적을 쉽게 할 수 있도록 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.

(https://ko.reactjs.org/docs/hooks-intro.html 참고)

​
​

Hooks의 장점

• 코드가 예뻐진다! 😝 간결하며 직관적이다.
• class를 사용하지 않고 함수형 프로그래밍이 가능하다.
• 보다 짧은 코드로 state를 사용할 수 있다.
  • 원래 state를 사용하려면 this같은 문장 규칙, render를 사용하는 방법을 생각했어야 했음
    • state 선언
    • render() 내에 이벤트 작성할 경우 함수로 풀어내어 this.setState(state ⇒ { return (item: state.item + 1) }) 이런식으로 굉장히 길어짐

​
​

---

Hooks의 종류

이 글에선 Nomad Coder 강의로 배운 종류만 기록한다.

useState

const [ item, setItem ] = useState();

• state값을 초기화 시켜준다.
• 초기에 initialState를 세팅할 수 있는 옵션을 제공한다.
  → ()에 값 지정 가능
• array를 return 해야 한다. 여기서는 item, setItem 요소를 가진다.
• 항상 2개의 value를 return
  • value = item, 값
  • 만약 item만 사용한다면
    const item = useState(1)[0]
• 사용 예시
  • 출력 :: <h1> { item } </h1>
  • 카운터 하나 올리기 :: const plusItem = () ⇒ setItem(item + 1);

​
​

useEffect

useEffect(function, [dependency]);

• component가 mount 되자마자, 또는 화면이 새로고침되면 실행된다.

  • 컴포넌트가 렌더링 되면 특정 작업을 실행하도록 할 수 있다.
  • 모든 변화를 감시하며, 화면이 새로고침되면(state의 갱신...) useEffect를 실행한다.

• 두 개의 인자는 function으로써의 effect, dependency를 가진다.

  • 첫번째 인자는 useEffect로부터 function이 리턴되는 것이며, 이는 componentWillUnmount와 같다.
  • 만약 dependency(deps)가 있다면 effect는 deps 리스트에 있는 값일 때만 값이 변하도록 활성화된다.
  • 두번째 인자에 어떠한 값이 존재하고, 그 값의 state가 변하면 useEffect를 실행시킨다.

• 만약 dependency에 빈배열( [] )이 들어있다면 component가 mount되었을 때 한 번만 실행되고 더이상 실행되지 않을 것이다.

• componentWillUnmount, componentDidMount, componentWillUpdate와 비슷함

• dependency에 빈배열이 들어가 있는 상태에서 useEffect안에 function을 넣으면 componentDidMount, componentDidUpdate때 호출될 것임

  • 만약 deps가 존재한다면 function은 componentDidMount일 때만 호출됨
    • componentWillUnmount 로부터 function 리턴 받음. 이를 Clean Up Function이라 부른다!

​
​

useRef

const refContainer = useRef (initialValue);

• DOM 노드나 React 엘리먼트에 직접 접근하기 위해서 사용하기도 함
• 기존 함수형 컴포넌트 내부에 선언된 변수와 그것이 감싸는 데이터는 해당 컴포넌트가 호출될 때마다 초기화됨. (리렌더링)
  • 반면 useRef로 관리되는 변수는 값이 바뀌어도 리렌더링 되지 않음.
    → 리렌더링 없이 값을 변화시킬 수 있음!!!
  • current가 가리키는 값은 React에 의해 기억되기에 직접 변경하기 전까지는 해당 컴포넌트가 호출될 때마다 동일함