[React] controlled pattern, uncontrolled pattern etc.

1. LCP 란

• LCP(Large Contentful Paint)
  • 웹 페이지에서 가장 큰 콘텐츠 요소를 로드하고 사용자가 볼 수 있는 데 걸리는 시간을 측정하는 성능 지표
  • 웹 페이지의 로딩 속도에 대한 사용자의 인식을 반영하고 웹 페이지에 대한 사용자의 참여에 영향을 미칠 수 있기 때문에 중요한 지표임!
• LCP를 개선하기 위해
  • lazy load, 이미지 크기 및 형식 최적화, CDN(콘텐츠 전송 네트워크) 등의 기술을 사용해 이미지 및 비디오와 같은 대용량 콘텐츠 요소의 로드를 최적화할 수 있음
  • HTML, CSS 및 JS 파일의 크기를 줄이고 서버에 대한 요청 수를 최소화하여 웹 페이지의 전체 로드를 최적화할 수 있음
• Chrome DevTools의 Lighthouse 검사 또는 WebPageTest와 같은 도굴ㄹ 사용해 웹 페이지의 LCP를 측정할 수 있음

 

2. FCP 란

• FCP(First Contentful Paint)
  • 브라우저가 웹 페이지의 첫 번째 콘텐츠 요소를 렌더링하는 데 걸리는 시간을 측정하는 성능 지표
  • 내용 요소는 텍스트, 이미지 또는 사용자가 볼 수 있는 다른 유혀으이 내용일 수 있음
  • FCP는 웹 페이지의 로딩 속도에 대한 사용자의 인식을 반영하고 웹 페이지에 대한 사용자의 참여에 영향을 미칠 수 있기 때문에 중요한 지표임
• FCP를 개선하기 위해
  • HTML, CSS 및 JS 파일의 크기를 줄이고 서버에 대한 요청 수를 최소화하여 췝 페이지 로드를 최적화할 수 있음
  • 또한 로드 프로세스에서 우선 순위를 지정하여 위의 내용과 같은 중요한 리소스의 로드를 최적화할 수 있음

 

3. Controlled Pattern 이란

• Controlled Pattern
  • 폼 요소의 상태를 React 컴포넌트의 state로 관리하는 방식
  • 이 패턴을 사용하면 React가 폼의 데이터를 완전히 제어할 수 있게 됨
  • 복잡한 폼이나 동적인 유효성 검사가 필요한 경우에 유용
• Controlled Pattern의 주요 특징
  • 상태 관리
    - 폼 요소의 값을 React의 state로 관리함
    - 사용자의 입력에 따라 state를 업데이트
  • 값 설정
    - 폼 요소의 value 속성을 state 값으로 설정
  • 이벤트 핸들링
    - onChange 이벤트를 통해 사용자 입력을 감지하고 state를 업데이트
• Controlled Pattern의 장점
  • 데이터 일관성: React가 폼 데이터를 완전히 제어하므로 UI와 상태 간의 일관성을 보장
  • 즉시 유효성 검사: 사용자 입력에 따라 즉시 유효성을 검사하고 피드백을 제공
  • 조건부 비활성화: 특정 조건에 따라 폼 요소를 쉽게 비활성화
  • 값 포맷팅: 입력값을 즉시 포맷팅하거나 변환할 수 있음
• 주의사항
  • 성능: 많은 수의 폼 요소가 있는 경우, 각 입력마다 리렌더링이 발생할 수 있어 성능에 영향을 줄 수 있음
  • 복잡성: 간단한 폼의 경우 Uncontrolled 컴포넌트를 사용하는 것이 더 간단할 수 있음

import React, { useState } from 'react';

function ControlledForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' value={inputValue} onChange={handleChange} />
      <button type='submit'>Submit</button>
    </form>
  );
}

 

4. Uncontrolled Pattern 이란

• Uncontrolled Pattern
  • React에서 폼 요소의 상태를 직접 React의 state로 관리하지 않고, DOM이 내부적으로 관리하도록 하는 방식
  • 주로 ref를 사용하여 필요할 때만 DOM에서 값을 가져옴
  • 간단한 폼이나 성능 최적화가 필요한 경우, 또는 비-React 코드와의 통합이 필요한 경우에 유용
  • 하지만 React 공식 문서에서는 대부분의 경우 Controlled 컴포넌트를 사용할 것을 권장하고 있음!
• Uncontrolled Pattern의 주요 특징
  • 상태 관리
    - React의 state를 사용하지 않고 DOM이 자체적으로 상태를 관리
    - 필요한 경우에만 ref를 통해 DOM에서 값을 읽어옴
  • 값 설정
    - 초기값을 설정하려면 defaultValue 속성을 사용
  • 이벤트 핸들링
    - onChange 이벤트를 반드시 사용할 필요 없음
• Uncontrolled Pattern의 장점
  • 간단성: 간단한 폼의 경우 코드가 더 간결해질 수 있음
  • 성능: React의 state를 사용하지 않으므로 입력 시마다 리렌더링이 발생하지 않음
  • 외부 라이브러리 통합: React 외부의 DOM 기반 라이브러리와 통합하기 쉬움
  • 파일 입력: file input과 같이 읽기 전용 값을 다룰 때 유용
• 주의사항
  • 유효성 검사: 즉각적인 유효성 검사나 입력값 변환이 어려움
  • 동적 UI: 입력값에 따라 UI를 동적으로 변경하기 어려움
  • 값 초기화: 프로그래밍 방식으로 입력값을 초기화하거나 변경하기 어려움