[React] React 개발을 하며 지키면 좋을 것들 (2)

위 글은  50 React.js Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,

팁이 50가지나 되는 만큼 한 글에 담기보단 10개씩 5번으로 나눠서 포스팅할 예정이다.

이 글은 5번째 중 2번째 글이다.

---

11. Fragments (프래그먼트)

문제: 여러 요소를 반환해야 하는데, DOM에 불필요한 노드를 추가하고 싶지 않습니다.

해결책: React Fragments를 사용하여 여러 요소를 그룹화하고 불필요한 노드를 추가하지 않습니다.

// PROBLEM: 불필요한 부모 요소가 추가됨

const List = () => (
  <div>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </div>
);

// SOLUTION: React Fragments 사용

const List = () => (
  <>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </>
);

// 사용 예시1
<ul>
  <List />
</ul>

// 사용 예시2
import { Fragment } from 'react';

<ul>
	<Fragment>
    	<li>Item 1</li>
    	<li>Item 2</li>
    	<li>Item 3</li>
    </Fragment>
</ul>

12. Keys in Lists (리스트의 키)

문제: 리스트를 렌더링할 때 React가 어떤 항목이 변경되었는지, 추가되었는지, 제거되었는지 식별할 방법이 필요합니다. 고유한 키가 없으면 React가 효율적으로 렌더링할 수 없습니다.

해결책: 리스트를 렌더링할 때 고유한 키를 제공하여 React가 항목을 식별할 수 있도록 합니다.

// PROBLEM: 고유한 키가 없어 리스트 항목을 식별할 수 없음

const List = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li>{item.name}</li>
    ))}
  </ul>
);

// SOLUTION: 고유한 키를 사용하여 리스트 항목을 식별

const List = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

// 사용 예시
const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
<List items={items} />

13. Controlled Components (제어 컴포넌트)

문제: 폼 입력의 상태를 관리하여 폼 데이터가 컴포넌트의 상태와 항상 동기화되도록 해야 합니다.

해결책: 제어 컴포넌트를 사용하여 입력 값이 컴포넌트의 상태에 의해 제어되도록 합니다.

// PROBLEM: 입력 값이 상태와 동기화되지 않음
const Form = () => (
  <input />
);

// SOLUTION: 제어 컴포넌트를 사용하여 상태와 동기화
const Form = () => {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <input value={value} onChange={handleChange} />
  );
};

// 사용 예시
<Form />

14. Uncontrolled Components (비제어 컴포넌트)

문제: 간단한 폼의 경우 모든 입력의 상태를 관리하는 것은 번거롭고 불필요할 수 있습니다.

해결책: 비제어 컴포넌트를 사용하고, refs를 통해 폼 데이터를 관리합니다.

// PROBLEM: 간단한 폼에서 모든 입력의 상태를 관리하는 것이 번거로움

const Form = () => {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <input value={value} onChange={handleChange} />
  );
};

// SOLUTION: 비제어 컴포넌트를 사용하여 상태 관리 최소화

const UncontrolledForm = () => {
  const inputRef = React.createRef();
  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
};

// 사용 예시
<UncontrolledForm />

15. Synthetic Events (합성 이벤트)

문제: 크로스 브라우저 방식으로 사용자 상호작용을 처리하는 것은 어려울 수 있습니다.

해결책: React는 합성 이벤트를 사용하여 크로스 브라우저 방식으로 사용자 상호작용을 처리합니다. 합성 이벤트는 브라우저 간의 이벤트 동작을 표준화합니다.

// PROBLEM: 브라우저 간의 일관되지 않은 이벤트 처리

const Button = () => {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Button clicked');
  };
  return <button onClick={handleClick}>Click me</button>;
};

// SOLUTION: React의 합성 이벤트 사용

const Button = () => {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Button clicked');
  };
  return <button onClick={handleClick}>Click me</button>;
};

// 사용 예시
<Button />

16. Batch Updates (배치 업데이트)

문제: 상태를 빠르게 여러 번 업데이트하면 여러 번의 리렌더링이 발생하여 성능 문제가 생길 수 있습니다.

해결책: React는 상태 업데이트를 배치 처리하여 렌더링을 최적화합니다. 상태가 이전 값을 기반으로 할 때는 함수형 업데이트를 사용합니다.

// PROBLEM: 여러 번의 상태 업데이트로 인한 불필요한 리렌더링

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
    setCount(count + 1); // 두 번의 리렌더링 발생
  };
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>{count}</p>
    </div>
  );
};

// SOLUTION: 함수형 업데이트를 사용하여 배치 처리
const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>{count}</p>
    </div>
  );
};

// 사용 예시
<Counter />

17. Refs (레퍼런스)

문제: DOM 노드나 React 엘리먼트에 직접 접근하여 상호작용(예: 포커스 관리, 애니메이션)을 해야 할 때가 있습니다.

해결책: React.createRef() 또는 useRef 훅을 사용하여 DOM 노드나 React 엘리먼트에 직접 접근합니다.

// PROBLEM: 직접 DOM 노드에 접근할 방법이 없음

const FocusInput = () => {
  const handleClick = () => {
    document.querySelector('input').focus();
  };
  return (
    <div>
      <input type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
};

// SOLUTION: refs를 사용하여 DOM 노드에 접근

const FocusInput = () => {
  const inputRef = React.createRef();
  const handleClick = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
};

// 사용 예시
<FocusInput />

18. Portals (포탈)

문제: 모달이나 툴팁과 같이 부모 DOM 계층 밖에 컴포넌트를 렌더링해야 할 때가 있습니다.

해결책: React Portals를 사용하여 부모 컴포넌트의 DOM 계층 밖에 있는 DOM 노드에 자식을 렌더링합니다.

// PROBLEM: 부모 DOM 계층 밖에 컴포넌트를 렌더링할 수 없음

const Modal = ({ children }) => (
  <div className="modal">
    {children}
  </div>
);

// SOLUTION: React Portals 사용

import ReactDOM from 'react-dom';
const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
};

// 사용 예시
<Modal>
  <h1>Modal Content</h1>
</Modal>

19. Higher-Order Components (HOCs) (고차 컴포넌트)

문제: 컴포넌트 로직을 재사용하려면 코드를 중복 작성해야 합니다.

해결책: 고차 컴포넌트(HOCs)를 사용하여 기존 컴포넌트에 추가 기능을 더합니다.

// PROBLEM: 컴포넌트 로직의 중복

const MyComponent = () => {
  useEffect(() => {
    console.log('Component mounted');
  }, []);
  return <div>Hello</div>;
};

// SOLUTION: 고차 컴포넌트를 사용하여 로직 재사용

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// 사용 예시
const MyComponent = () => <div>Hello</div>;
const MyComponentWithLogging = withLogging(MyComponent);
<MyComponentWithLogging />

20. Controlled vs. Uncontrolled Components (제어 컴포넌트 vs. 비제어 컴포넌트)

문제: 폼 입력을 관리하는 것이 까다로울 수 있으며, 제어 컴포넌트와 비제어 컴포넌트 중 어느 것을 사용할지 결정해야 합니다.

해결책: 폼 데이터를 컴포넌트 상태로 관리해야 할 때는 제어 컴포넌트를 사용하고, 간단한 폼일 경우 비제어 컴포넌트를 사용합니다.

// PROBLEM: 폼 입력을 관리하는 것이 복잡함

const ControlledInput = () => {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// SOLUTION: 제어 컴포넌트와 비제어 컴포넌트의 사용 구분

//제어 컴포넌트
const ControlledInput = () => {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// 비제어 컴포넌트
const UncontrolledInput = () => {
  const inputRef = useRef();
  return <input ref={inputRef} />;
};

---

자주 사용되는 특징(react18버전과 비교)

1. Fragments (프래그먼트): React Fragments는 여러 요소를 그룹화하면서 불필요한 DOM 노드를 추가하지 않도록 하는 중요한 기능으로, React 18에서도 여전히 매우 자주 사용됩니다.
2. Keys in Lists (리스트의 키): 리스트를 렌더링할 때 고유한 키를 제공하는 것은 필수적입니다. React 18에서도 리스트의 효율적인 렌더링을 위해 항상 고유한 키를 사용하는 것이 좋습니다.
3. Controlled Components (제어 컴포넌트): 폼 입력의 상태를 관리하기 위해 제어 컴포넌트를 사용하는 것은 여전히 일반적인 방식입니다. React 18에서도 폼 상태를 관리하는 주요 방법으로 사용됩니다.
4. useRef (레퍼런스): DOM 노드나 React 엘리먼트에 직접 접근하기 위해 useRef 훅을 사용하는 것은 여전히 중요합니다. 특히, 포커스 관리나 애니메이션에 많이 사용됩니다.
5. useEffect (합성 이벤트): 이벤트 핸들링을 위해 합성 이벤트를 사용하는 것은 React 18에서도 여전히 매우 중요한 기능입니다. 이는 크로스 브라우저 호환성을 보장합니다.

잘 사용되지 않는 특징

1. Uncontrolled Components (비제어 컴포넌트): 비제어 컴포넌트는 간단한 폼에서는 유용할 수 있지만, 더 복잡한 폼이나 상태 관리를 해야 하는 경우에는 제어 컴포넌트가 더 선호됩니다. 따라서 비제어 컴포넌트는 사용 빈도가 낮습니다.
2. Higher-Order Components (HOCs) (고차 컴포넌트): HOCs는 로직 재사용을 위한 전통적인 방법이지만, React 18에서는 주로 Hooks와 Custom Hooks가 더 많이 사용됩니다. HOCs는 기존 코드베이스에서 여전히 사용되지만, 새로운 프로젝트에서는 Hooks가 대세입니다.
3. React.createRef(): 직접 DOM에 접근하기 위해 useRef를 사용하는 경우가 많아지면서 React.createRef()는 잘 사용되지 않습니다. useRef가 더 간결하고 함수형 컴포넌트에서 쉽게 사용할 수 있기 때문입니다.
4. Portals (포탈): 포탈은 여전히 특정 상황에서 유용하지만, 프로젝트에 따라 사용 빈도가 다릅니다. 모달이나 툴팁과 같은 경우에만 주로 사용됩니다.
5. Batch Updates (배치 업데이트): React 18에서는 자동 배치 업데이트가 기본으로 제공되기 때문에, 배치 업데이트를 직접 처리할 필요가 줄어들었습니다. 이는 React 18에서 성능 최적화의 중요한 부분입니다.

---

관련 글

2024.06.13 - [Programming Language/React] - [React] React 개발을 하며 지키면 좋을 것들 (1)

[React] React 개발을 하며 지키면 좋을 것들 (1)

 

2024.06.15 - [Programming Language/React] - [React] React 개발을 하며 지키면 좋을 것들 (3)

[React] React 개발을 하며 지키면 좋을 것들 (3)

 

2024.06.16 - [Programming Language/React] - [React] React 개발을 하며 지키면 좋을 것들 (4)

[React] React 개발을 하며 지키면 좋을 것들 (4)

 

2024.06.17 - [Programming Language/React] - [React] React 개발을 하며 지키면 좋을 것들 (5)

[React] React 개발을 하며 지키면 좋을 것들 (5)