React 3일차(useState, useRef)

React Hooks

React는 가상 DOM을 사용하여 상태가 변경될 때마다 다시 렌더링 된다.

하지만 Reat Hooks은 컴포넌트가 렌더링 될 때마다 상태를 유지하고, 업데이트할 수 있는 메커니즘을 제공한다.

상태(State), 클래스 컴포넌트의 생명주기(Lifecycle), 참조(Ref), 효과(Effect) 등 여러 가지 기능을 사용할 수 있도록 제공해 준다.

use를 접두사가 붙이는 네이밍 규칙이 있다.

 

React Hooks를 사용하는 이유

• 함수형 컴포넌트에서 상태 관리가 가능하다.
• 클래스 컴포넌트의 생명주기 메서드(copmonentDidMount 등)를 useEffect로 사용할 수 있다.
• Custom Hooks를 사용하여 재사용성을 높일 수 있다.
• 계산을 많이 하는 하위 컴포넌트의 렌더링을 방지하여 최적화가 가능하다.

 

React Hooks를 사용할 때 주의해야 할 부분

• 함수형 컴포넌트와 커스텀 훅 내부에서만 호출이 가능하다.
• 항상 같은 순서로 호출되어야 하므로 if, while 등 조건문 안에서 사용할 수 없다.

 

useState

함수형 컴포넌트에서 상태(State)를 관리할 수 있게 해주는 Hook이다.

클래스형 컴포넌트에서 사용한 this.state, this.setState()를 사용하여 상태를 관리하는 것처럼 상태(State)를 관리할 수 있다.

useState는 상태와 상태변수를 배열로 반환하며, 렌더링이 될 때마다 값을 유지한다.

상태가 변경되면, 리렌더링이 되고 새로운 상태 값으로 UI를 렌더링 한다.

 

동작 원리

useState는 초기값을 인자로 받고, 이 값은 컴포넌트가 처음 렌더링될 때 상태의 초기값으로 사용된다. 
렌더링이 일어날 때마다 React는 해당 컴포넌트에 저장된 최신 state 값을 반환하며, setState를 호출하면 새로운 상태가 저장되고 컴포넌트가 다시 렌더링 된다. 이를 통해 UI는 상태 변화에 맞게 업데이트된다.

 

상태 끌어올리기

상위 컴포넌트에서 state를 저장하고, props를 통해 하위 컴포넌트로 전달하는 방식으로 상태를 상위에서 관리하고 하위 컴포넌트들이 그 값을 읽고 업데이트할 수 있는 방법이다.

상위 컴포넌트에서 상태를 관리하고 하위 컴포넌트로 전달하는 이유는 상태 관리 중앙화하여 여러 하위 컴포넌트의 상태값을 공통적으로 관리할 수 있기 때문이다.

 

const UseStateTest = () => {
    //const num = 0;
    const [num, setNum] = useState(0);

    const onClickPlus = () => {
        setNum(num + 1); // 1
        setNum(num + 1); // 2가 아닌 1. 
    }

    const onClickMinus = () => {
        setNum((prevNum) => prevNum - 1); // 콜백 함수
        setNum((prevNum) => {
            console.log(prevNum);
            return prevNum - 1;
        });

        console.log(num);
    }

    return (
        <div>
            <div>COUNT : {num}</div>
            <button onClick={onClickPlus}> + </button>
            <button onClick={onClickMinus}> - </button>
        </div>
    )
}

UseStateTest라는 하위 컴포넌트이다.

배열 분배 할당으로 useState 초기값을 저장하고 UI의 버튼을 클릭할 때마다 함수를 호출한다. 

 

onClickPlus 함수 안에서 첫 번째 setNum은 1이 증가되지만, 이전 값만 보고 계산하기 때문에 누적되지 않는다.

반면, onClickMinus 함수 안에서 콜백함수를 사용하였고, 최신 상태 값을 보고 계산하기 때문에 누적된다.

따라서 onClickMinus 함수는 -2 감소한다.

 

useRef

렌더링 사이에 값을 유지하고 리렌더링을 트리거로 사용하고 싶지 않을 때 사용한다.

const scrollRef = useRef({
    home: null,
    about: null,
    contact: null
})

scrollRef.current는 ref 객체의 현재 값을 나타낸다.

컴포넌트가 리렌더링 되어도 유지되며, 리렌더링을 트리거하지 않는다.

 

주요 용도

• DOM 요소를 직접 참조할 때 사용된다.
• 값을 변경해도 리렌더링을 트리거하지 않기 때문에, 상태를 관리하지 않지만 값을 변해야 하는 경우에 사용된다.

 

useRef와 useState의 차이점

• 리렌더링 트리거
  • useState는 상태 값이 변경되면 컴포넌트를 리렌더링 한다.
  • useRef는 ref 값이 변경되어도 리렌더링을 트리거하지 않는다.
• 값의 용도
  • useState는 UI 영향을 미치는 상태를 관리한다.
  • useRef는 UI에 영향을 미치지 않는 값을 관리하거나 DOM 요소를 직접 참조하는 데 사용된다.