[리액트(React)] 6. 리액트훅(Hook) - 기본편

본격적으로 훅을 공부해보자

우선 기본적인 것들만 먼저 공부를 하고 추후 필요할 때 다시 공부를 해야겠다.

 

시작하기 전에...

함수는 안에 정의된 모든 요소들은 호출이 될 때마다 재정의가 되는 것을 처음 정의만 하면 반복되지 않게 도와주는 것이 훅의 시작이다

---

1. useState

- useState는 state를 기억해준다

useState(초기값)는 [state이름, state변경함수] 를 반환한다.

state 변경시에는 state변경 함수를 이용해서 변경해줘야 한다.

// components/greeting.jsx
import React, {useState} from 'react';

function Greeting(props) {

  const [num, setNum] = useState(0)

  const greet = () => {
    setNum(num+1)
  }

    return (
      <div>
        <h1>이름 : {props.name}</h1>
        <h1>직업 : {props.job}</h1>
        <h1>인사 횟수 : {num}</h1>
        <button onClick={greet}>인사하기</button>
      </div>
    );
}

export default Greeting;

2. useEffect

- 클래스 컴포넌트에서의 componentDidMount + componentDidUpdate이다.

+ componentWillUnmount

// components/greeting.jsx
import React, {useEffect, useState} from 'react';

function Greeting(props) {

  const [num, setNum] = useState(0)

  const greet = () => {
    setNum(num+1)
  }

  useEffect(()=>{
    console.log('인사완료!')
  })

    return (
      <div>
        <h1>이름 : {props.name}</h1>
        <h1>직업 : {props.job}</h1>
        <h1>인사 횟수 : {num}</h1>
        <button onClick={greet}>인사하기</button>
      </div>
    );
}

export default Greeting;

- 인자를 받아서 특정 값이 변경됐을 경우에만 호출하는 것도 가능하다

useEffect(()=>{
    // 내용
  }, [])
  
  /*
    [] 안에 인자 전달 가능
    빈 상태 : componentDidMount랑 같음
  */

 

3. useRef

- 값에 접근하기 위해서 (클래스 컴포넌트의 React.createRef와 같음)

- 함수 내부에서의 createRef와 다르게 한 번만 선언하면 반복해서 선언하지 않는다

input의 값을 엔터를 누르면 num에 넣어주는 예시이다

// components/greeting.jsx
import React, {useState, useRef} from 'react';

function Greeting(props) {

  const [num, setNum] = useState(0)
  const inputRef = useRef()

  const onKeyPress = (e) => {
    if (e.key === 'Enter') {
      const num = inputRef.current.value
      setNum(num)
    }
  }

    return (
      <div>
        <h1>이름 : {props.name}</h1>
        <h1>직업 : {props.job}</h1>
        <h1>인사 횟수 : {num}</h1>
        <input ref={inputRef} type="text" onKeyPress={onKeyPress}/>
      </div>
    );
}

export default Greeting;