[React] 리액트 컴포넌트 (Component)

해당 게시물은 과거에 작성한 블로그 내용을 옮겨 온 것으로, 가독성이 떨어지고 내용이 부정확할 수 있습니다.

컴포넌트 (Component)

• 리액트 어플리케이션을 이루는 최소한의 단위
• 재활용성 및 독립성 증가
• 데이터를 입력받은 후 state에 따라 DOM 노드 출력
• 컴포넌트명은 항상 대문자로 시작
  • 소문자로 시작하는 컴포넌트는 DOM 태그로 취급하기 때문
  • DOM: HTML 문서에 대한 웹 페이지 인터페이스
• 종류
  • 함수형 컴포넌트: JavaScript 함수를 작성하여 정의한 컴포넌트
  • 클래스형 컴포넌트: state, lifeCycle에 관련된 기능 사용 가능

함수형 컴포넌트

• JavaScript 함수를 작성하여 선언한 컴포넌트
• 데이터를 가진 하나의 props 객체 인자를 받은 후 React 요소를 반환
• state, lifeCycle 관련 기능 사용 불가
  • Hook으로 해결
• 메모리 자원을 비교적 적게 사용
• 편리한 컴포넌트 선언

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

클래스형 컴포넌트

• class 키워드를 통해 선언한 컴포넌트
• state, lifeCycle에 관련된 기능 사용 가능
• Component 상속 필요
• render() 메서드 필요
• 메모리 자원을 비교적 많이 사용
• 임의 메서드 정의 가능

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Props (Properties)

• 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 객체
• 단방향적인 데이터 흐름
• 수정 불가 (읽기 전용)
  • 모든 리액트 컴포넌트는 props를 다룰 때 순수 함수처럼 동작해야 함
• 함수의 파라미터 역할을 하는 객체
• 단일 값 전달 시 해당 컴포넌트 태그에 변수명 = {}으로 사용

<Tag param = {props} />    // 일반화
<Time init = {today} />    // 예시

<p>{props.today}</p>    // 자식 컴포넌트에서 객체 타입으로 받아오는 경우

• 다중 값 전달 시 스프레드 연산자 (...) 사용

// App.js
count timeProps = {
    defaultDate: today,
    message: '지금 시간은"
};

function App(){
    return(
      <div className = "App">
        <AppHeader/>
        <header className = "App-header">
            <Time{...timeProps}/>
        </header>
        <AppFooter/>
      </div>
    );
}

• defaultProps 속성을 사용해 초기화 진행

class PhoneInfo extends Component{
    static defaultProps = {
        info: {
            name: '이름',
            phone: '010-0000-0000',
            id: 0
        }
    }
    ...
}