컴포넌트란?

UI를 재사용이 가능하게 하는 여러 조각으로 개념적으로는 JavaScript 함수와 유사하다.

함수형 컴포넌트와 클래스 컴포넌트

// 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name} </h1>
}

// 클래스 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name} </h1>
  }
}

컴포넌트 렌더링

리액트 엘리먼트는 사용자 정의 컴포넌트로도 나타 낼 수 있다.

const element = <Welcome name="Sara" />;

리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트(Welcome)를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트의 단일 객체로 전달한다. 이 객체를 props라고 한다.

<주의: 컴포넌트의 이름은 항상 대문자로 시작한다.>
리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문에 HTML 태그는 소문자로, 컴포넌트는 대문자로 작성한다

컴포넌트 합성

일반적으로 리액트는 최상위 컴포넌트 App을 가지고 있으며
이 App 컴포넌트 안에 다른 컴포넌트들을 추가하여 ReactDOM.render()메서드를 이용하여 화면이 렌더링된다.

props는 읽기 전용

• props는 properties의 줄임말이다.
• 함수형 컴포넌트나 클래스 컴포넌트 모두 props를 수정해서는 안된다.
• 모든 리액트 컴포넌트는 자신의 props를 다룰 때 순수함수처럼 동작을 해야한다.
• 순수함수란 입력값이 바뀌지 않는 것을 말하며 immutable하다.

---

< 클래스 컴포넌트와 함수 컴포넌트 차이 >

1. 클래스 컴포넌트는 class 키워드 사용
2. 클래스 컴포넌트는 React.Component를 상속받아야 한다.
3. 클래스 컴포넌트는 render() 메서드가 있어야 한다.

---

차이

클래스 컴포넌트

• state와 lifeCycle 기능 사용 가능
• constructor(생성자) 안에서 this.state 초기값 설정이 가능[생성자 없이도 초기값 설정은 가능]
• state는 객체형식이며 this.setState 메서드로 state 값 변경이 가능
• this.props로 값을 불러올 수 있다.

const {name, age, address} = this.props;

함수형 컴포넌트

• state와 lifeCycle 기능 사용 불가능[Hooks을 통해 해결 됨]
• useState 메서드로 state 사용[Hooks 중 하나]
• useState 메서드는 배열이 반환되며 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꾸어주는 함수
• props를 불러올 필요없이 바로 호출이 가능

const Hello = ({name, age, address}) => {
  return (
    );
}