TIL - 20260212

0212 리액트 기초 복습 (4/N): 스타일링, Side Effects, 최적화

---

✅ 1. React 컴포넌트 스타일링

• React에서 컴포넌트에 스타일을 적용하는 방법은 여러 가지가 있으며, 각 방식의 장단점을 이해하고 상황에 맞게 사용하는 것이 중요합니다.

방법	설명	장점	단점
일반 CSS 파일	• .css 파일을 생성하고 import './MyComponent.css';로 불러옴. • className prop으로 클래스 적용.	• 가장 간단하고 익숙함.	• 클래스 이름이 전역 스코프를 가져, 다른 컴포넌트와 충돌할 위험이 있음.
인라인 스타일	• JSX의 style prop에 JavaScript 객체를 전달. • style={{ color: 'red', fontSize: '16px' }}	• 상태(state)에 따라 동적으로 스타일을 쉽게 변경 가능.	• CSS의 모든 기능을 지원하지 않음 (e.g., :hover). • 재사용성이 떨어지고 가독성을 해칠 수 있음.
CSS Modules	• CSS 파일 이름을 *.module.css로 짓고 import styles from ...로 불러옴. • className={styles.myClass} 형태로 사용.	• 클래스 이름을 컴포넌트 스코프로 만들어, 스타일 충돌을 원천적으로 방지. • 일반 CSS의 모든 기능 사용 가능.	• 설정이 약간 필요하며, 클래스 이름이 해시값으로 변환됨.
Styled-components	• CSS-in-JS 라이브러리. • JavaScript 파일 내에서 스타일이 적용된 컴포넌트를 직접 생성.	• 컴포넌트와 스타일의 완벽한 결합. • Props를 이용한 동적 스타일링이 매우 강력함.	• 별도의 라이브러리 설치 필요. • 학습 곡선이 존재함.

• 동적 클래스 적용: 상태에 따라 클래스 이름을 조건부로 부여하는 것은 매우 일반적인 패턴입니다.

  const [isValid, setIsValid] = useState(true);
  // isValid가 false일 때 'invalid' 클래스가 동적으로 추가됨
  <div className={`form-control ${!isValid ? 'invalid' : ''}`}>...</div>

---

✅ 2. Side Effects와 useEffect Hook

• Side Effect (부수 효과)란 React 컴포넌트의 주된 역할인 UI 렌더링 외에, 외부 세계와 상호작용하는 모든 작업을 의미합니다.

• 주요 Side Effects 예시:

  • HTTP 요청 (데이터 fetching)
  • 타이머 설정 (setTimeout, setInterval)
  • DOM 직접 조작
  • 브라우저 API(e.g., localStorage) 사용

• useEffect Hook: 함수형 컴포넌트에서 이러한 Side Effects를 처리하기 위해 사용하는 Hook입니다. useEffect에 전달된 함수는 컴포넌트가 렌더링된 후(DOM에 반영된 후)에 실행됩니다.

➕ 의존성 배열 (Dependency Array)

• useEffect의 두 번째 인자로 전달되는 배열입니다. 이 배열의 역할은 useEffect가 언제 다시 실행될지를 결정하는 것입니다.
  • [] (빈 배열): 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다. (초기 데이터 로딩에 주로 사용)
  • [state, props]: 배열 안의 값이 변경될 때마다 useEffect가 다시 실행됩니다.
  • 생략: 컴포넌트가 리렌더링될 때마다 useEffect가 실행됩니다. (의도치 않은 무한 루프를 유발할 수 있어 주의 필요)

➕ Cleanup 함수 (정리 함수)

• useEffect가 반환(return)하는 함수를 Cleanup 함수라고 합니다. 이 함수는 컴포넌트가 DOM에서 제거되기 직전(unmount), 또는 useEffect가 다시 실행되기 직전에 호출되어, 이전에 실행했던 Side Effect를 "정리"하는 역할을 합니다. 메모리 누수(Memory Leak)를 방지하기 위해 필수적입니다.

  useEffect(() => {
    // Side Effect: 1초마다 콘솔에 로그 출력
    const timerId = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  
    // Cleanup 함수: 컴포넌트가 사라질 때 타이머를 제거
    return () => {
      clearInterval(timerId);
    };
  }, []); // 처음 마운트될 때만 실행

---

✅ 3. React 렌더링 최적화

• React는 부모 컴포넌트가 리렌더링되면 기본적으로 모든 자식 컴포넌트도 리렌더링합니다. 이는 props가 변경되지 않은 자식에게는 불필요한 연산이므로, 성능 저하의 원인이 될 수 있습니다.

➕ 주요 최적화 도구

1. React.memo:

   • 컴포넌트를 감싸는 고차 컴포넌트(HOC)로, props가 변경되었을 때만 해당 컴포넌트를 리렌더링하도록 만듭니다.
   • props가 자주 변경되지 않는 무거운 UI 컴포넌트에 적용하면 효과적입니다.

2. useCallback:

   • 문제: 컴포넌트가 리렌더링될 때마다 내부에 선언된 함수는 새로운 함수로 다시 생성됩니다. 이 함수를 memo로 감싼 자식에게 prop으로 전달하면, prop이 변경된 것으로 간주되어 memo가 무력화됩니다.
   • 해결: useCallback은 함수 자체를 메모이제이션(memoization)하여, 의존성 배열의 값이 변경되지 않는 한 함수를 재생성하지 않고 재사용하게 해주는 Hook입니다.

3. useMemo:

   • 함수가 아닌, 값(value)을 메모이제이션합니다.
   • 복잡하고 비용이 큰 계산(e.g., 배열 필터링, 정렬)의 결과를 저장해두고, 의존성 배열의 값이 변경될 때만 해당 계산을 다시 수행합니다.

---

📌 요약

• React 컴포넌트 스타일링에는 여러 방법이 있으며, 스타일 충돌을 방지하기 위해 CSS Modules나 Styled-components와 같은 스코프 스타일링 방식이 권장됩니다.
• useEffect는 데이터 fetching과 같은 Side Effects를 처리하는 Hook이며, 의존성 배열로 실행 시점을 제어하고 Cleanup 함수로 메모리 누수를 방지해야 합니다.
• 불필요한 리렌더링을 방지하여 성능을 최적화하기 위해, React.memo로 컴포넌트를, useCallback으로 함수를, useMemo로 값을 메모이제이션할 수 있습니다.