[React] React 컴포넌트 구조

React 주요 특징

컴포넌트 기반 아키텍처

UI를 재사용 가능한 독립적인 컴포넌트로 분해한다.

 

선언적 문법

상태에 따라 UI가 어떻게 보여야 하는지 선언한다.

 

효율적인 렌더링

Virtual DOM을 통한 빠르고 최적화된 업데이트를 제공한다.

 

 

컴포넌트의 기본 구조

함수형 컴포넌트 (Modern Approach)

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

 

클래스형 컴포넌트 (Legacy Approach)

class Welcome extends React.Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

 

 

React Hooks

React 16.8 버전부터 도입된 Hooks는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해준다.

 

useState: 상태 관리

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

 

useEffect: 생명주기 메서드 대체

useEffect(() => {
  // 컴포넌트 마운트 후 실행되는 코드
  return () => {
    // 컴포넌트 언마운트 시 정리 코드
  };
}, [dependency]); // dependency 배열

 

 

 

컴포넌트 구성 원칙

단일 책임 원칙

각 컴포넌트는 하나의 명확한 책임을 가져야 하며, 컴포넌트를 작고 재사용 가능하게 설계해야한다.

 

Props

부모 컴포넌트에서 전달받는 읽기 전용 데이터이다.

 

State

컴포넌트 내부에서 관리되는 변경 가능한 데이터이다.

 

컴포넌트 합성 예시

function UserProfile({ name, age }) {
  return (
    <div>
      <UserName name={name} />
      <UserAge age={age} />
    </div>
  );
}

 

 

 

성능 고려 시

React.memo(): 불필요한 렌더링 방지

useMemo(): 복잡한 계산 결과 메모이제이션

useCallback(): 함수 재생성 최적화

 

React의 컴포넌트 기반 아키텍처는 복잡한 UI를 간단하고 유지보수하기 쉬운 코드로 만들 수 있게 해준다. 컴포넌트의 기본 원칙을 이해하고 적절히 활용하면 효율적이고 확장 가능한 웹 애플리케이션을 개발할 수 있다.