📚 Reference

📜 Chapter

Class component

Client Component

Server Component

Function component

• Function component
• 함수형 컴포넌트
• JSX를 리턴 하는 함수형 컴포넌트
• Component 클래스를 상속해 React 컴포넌트를 만들었는데 이것 말고도 컴포넌트를 만들 수 있는 방법이 하나 더 있다. → 함수 컴포넌트

const Hello = () => <>Hello world</>

<Hello />

• 일반 함수이다.
• 단, React 엘리먼트를 반환하는 함수여야 React 컴포넌트가 될 자격을 가진다.
• 클래스 상속도 생성자도 render() 메서드도 없어서 클래스 컴포넌트에 비해 상대적으로 코드가 짧다.
• 가장 큰 차이는 state가 없다는 점이다.
• 내부 상태가 필요 없는 컴포넌트라면 함수 컴포넌트를 사용할 수 있다.
• 컴포넌트의 파일명을 대문자로 한다.
• 클래스 컴포넌트와 함수형 컴포넌트의 가장 큰 차이는 상태의 유무이다.
• 함수형 컴포넌트는 상태(state)가 없다.
• 컴포넌트 내부에 위치한 state가 UI와 밀접하게 반응하는데 외부로부터 전달 받은 props도 state와 동일한 성질을 갖는다.