3.React의 hook

React Hook 이란

React Hooks는 React 버전 16.8에 도입된 기능으로, 이전에는 class component에서만 사용할 수 있었던 functional component에서 개발자가 상태 및 기타 React 기능을 사용할 수 있도록 한다. Hooks는 React 코드를 작성하는 더 간단하고 간결한 방법을 제공하고 component 간에 코드를 더 쉽게 재사용하고 공유할 수 있도록 한다.

Hooks

useState

component가 functional component의 상태를 관리할 수 있도록 하는 가장 일반적으로 사용되는 hook이다. 초기 상태 값을 받아 현재 상태 값과 상태 값을 업데이트하는 함수의 두 가지 요소가 포함된 배열을 반환한다. 상태 값이 변경될 때마다 component는 새 상태 값으로 다시 렌더링된다.

const [count, setCount] = useState(0);

return (
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
  </div>
);

useEffect

useEffect를 사용하면 component가 API에서 데이터를 가져오거나 DOM을 업데이트하는 것과 같은 side effect를 functional component에서 수행할 수 있다. side effect를 수행하는 함수를 사용하고 component를 렌더링할 때마다 실행한다. 개발자는 component가 마운트 해제된 후 또는 다음 효과가 실행되기 전에 실행할 정리 기능을 지정할 수도 있다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

useContext

useContext를 사용하면 component가 상위 component에서 제공하는 컨텍스트 값을 사용할 수 있다. 컨텍스트 개체를 사용하고 현재 컨텍스트 값을 반환한다. 컨텍스트 값이 변경되면 component가 새 값으로 다시 렌더링된다.

import React from 'react';

const UserContext = React.createContext();

export default UserContext;

import React from 'react';
import UserContext from './UserContext';

export default function App() {
  const user = { name: 'John Doe', email: '[e-mail]' };

  return (
    <UserContext.Provider value={user}>
      <Greeting />
    </UserContext.Provider>
  );
}

import React, { useContext } from 'react';
import UserContext from './UserContext';

const user = useContext(UserContext);

export default function Greeting() {
  const user = useContext(UserContext);

  return (
    <div>
      Hello, {user.name}!
    </div>
  );
}

useRef

useRef를 사용하면 component가 다시 렌더링하는 동안 지속되는 값에 대한 변경 가능한 참조를 만들 수 있다. DOM 요소 또는 여러 렌더링에서 액세스해야 하는 다른 값에 할당할 수 있는 변경 가능한 ref 개체를 반환한다.

const inputRef = useRef(null);

return (
  <div>
    <input ref={inputRef} />
    <button onClick={() => inputRef.current.focus()}>Focus input</button>
  </div>
);

useLayoutEffect

useLayoutEffect는 useEffect()와 유사하지만 모든 DOM 변형이 완료된 후 브라우저가 업데이트된 화면을 그리기 전에 동기적으로 실행된다. DOM 요소를 측정하거나 업데이트된 DOM의 정확한 측정이 필요한 기타 작업을 수행하는 데 유용한다.

useLayoutEffect(() => {
  const dimensions = inputRef.current.getBoundingClientRect();
  console.log(dimensions);
}, [inputRef.current]);

return (
  <div>
    <input ref={inputRef} />
  </div>
);

React StrictMode 란

React의 StrictMode는 개발 중에 React 애플리케이션의 잠재적인 문제를 강조 표시하는 개발자 도구다. StrictMode가 활성화되면 React는 추가 검사를 수행하고 일반적인 실수와 잠재적인 버그를 식별하는 데 도움이 되는 경고를 내보낸다.

1. 예기치 않은 동작을 유발할 수 있는 componentWillMount 및 componentWillReceiveProps와 같은 안전하지 않은 수명 주기 메서드를 식별한다.

2. 불필요한 재렌더링을 유발할 수 있는 상태 설정과 같은 렌더링 방법의 잠재적인 부작용을 강조 표시한다.

3. component에서 발생하는 처리되지 않은 오류 감지.

StrictMode는 프로덕션 모드에서 애플리케이션의 동작에 영향을 주지 않으며 개발 중에만 사용된다. StrictMode를 활성화하려면 앱 또는 특정 component를 <React.StrictMode> component로 래핑하기만 하면 된다.

v18이전

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

v18이후

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');

if (!container) {
  return;
}

const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Reference

• React Today and Tomorrow and 90% Cleaner React With Hooks

• useEffect 완벽 가이드