2026-02-17

React 컴포넌트

컴포넌트란 무엇인가

UI를 구성하는 독립적이고 재사용 가능한 단위

• 화면을 구성하는 부품
• 버튼, 카드, 모달, 헤더 등
• 모든 UI 요소는 컴포넌트로 나눌 수 있음

컴포넌트의 핵심 특징

• 재사용성: 같은 컴포넌트를 여러 곳에서 사용 가능
• 독립성: 자기 상태(state)와 로직을 가질 수 있음
• 조합성: 컴포넌트 안에 또 다른 컴포넌트를 포함 가능

⇒ React는 “컴포넌트 기반 아키텍처”를 따른다.

컴포넌트의 종류

• 함수형 컴포넌트 (현재 표준)

  function Button() {
    return <button>Click</button>;
  }
  

  또는

  const Button = () => <button>Click</button>;
  

  ⇒ React 16.8 이후 Hooks 등장으로 함수형이 기본

• 클래스형 컴포넌트 (과거 방식)

  class Button extends React.Component {
    render() {
      return <button>Click</button>;
    }
  }
  

  ⇒ 현재는 거의 사용되지 않음

Props와 State

• Props
  • 부모 → 자식 전달 데이터
  • 읽기 전용 (immutable) ```jsx

  ```

• State
  • 컴포넌트 내부에서 관리하는 데이터
  • 변경 가능
  • 변경 시 리렌더링 발생

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

    ⇒ State 변경 → 렌더링 트리거

컴포넌트의 렌더링 원리

1. 함수 실행
2. JSX 반환
3. Virtual DOM 생성
4. Diffing
5. 실제 DOM 업데이트

⇒ 컴포넌트는 “HTML을 반환하는 함수”가 아니라 “UI 상태를 계산하는 함수”

생명주기(Lifecycle)

• 함수형 컴포넌트에서의 생명주기 useEffect로 관리한다.

  useEffect(() => {
    console.log("마운트");
  
    return () => {
      console.log("언마운트");
    };
  }, []);
  

  • Mount (처음 렌더링)
  • Update (상태 변경)
  • Unmount (제거)

컴포넌트 분리 기준

• UI 단위로 분리 버튼, 카드, 리스트 등
• 책임 단위로 분리 로직과 역할 기준
• 재사용 가능성 기준 → 단일 책임 원칙(SRP)과 연결됨

리렌더링이 발생하는 조건

• state 변경
• props 변경
• 부모 컴포넌트 리렌더링
• context 변경

⇒ 렌더링 ≠ 항상 DOM 변경

컴포넌트 최적화 방법

• React.memo
• useMemo
• useCallback
• 불필요한 state 제거
• key 정확히 설정

함수형 컴포넌트가 기본이 된 이유

• 코드 간결
• 가독성 좋음
• Hooks로 상태 관리 가능
• 클래스의 this 문제 해결

참고자료

• https://devyihyun.tistory.com/169
• https://velog.io/@ljw4536/React-%EA%B0%9C%EB%85%90-%EC%9E%A1%EA%B8%B0-React-%EC%97%90%EC%84%9C-Component-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80