[React] 📖 Component

❓ 컴포넌트(Component)

하나의 특정한 기능을 수행할 수 있도록 구성한 재사용이 가능한 작은 기능적 단위
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

❓ 컴포넌트 만드는 방법

🚀 함수형 컴포넌트

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

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

🚀 클래스형 컴포넌트

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

참고 자료 : https://ko.legacy.reactjs.org/docs/components-and-props.html

❓ 함수형 컴포넌트 VS 클래스형 컴포넌트

🚀 함수형 컴포넌트

• hook을 통해 라이프 사이클 기능과 state 관리 기능이 구현된다.
• 선언하기 편하다.
• 메모리 자원을 덜 사용한다.
• react 공식문서에서 추천하는 방법이다.

🚀 클래스형 컴포넌트

• 라이프 사이클 기능과 state 관리 기능이 코드에 구현된다.
• class 키워드가 필요하며, Component로 상속을 받아야 한다.
• render() 메소드가 반드시 필요하다.
• 임의 메소드를 정의할 수 있다.

❓ 컴포넌트 장점

React에서는 컴포넌트를 기본 단위로 사용하여 의존성이 낮고 재사용성과 범용성을 높인 코드를 지향한다.
따라서 컴포넌트를 사용하면 재사용성과 범용성을 높일 수 있다.

❓ 컴포넌트 만드는 방법

🚀 관심사를 분리하고 단일 책임으로 설계하기

• 컴포넌트가 재사용성과 범용성을 지니기 위해서는 관심사에 따라 한 가지의 역할만 수행해야 한다.(이를 객체지향에서는 단일 책임 윈칙이라 함)
• 리액트 컴포넌트가 한 가지 역할만 수행하기 위해서는 동일한 props를 받으면 동일한 JSX를 리턴하는 순수함수로 이뤄져야 한다.
• 이러한 단일 책임을 가지는 순수 컴포넌트들은 테스트하기 좋고, 가독성도 좋다.

🚀 제어 위임하기

• 제어를 외부에 위임할수록 컴포넌트의 유연성과 재사용성이 높아진다.
• 제어를 위임에 맡길수록 비즈니스 로직을 맡는 컴포넌트에 import해서 재사용이 가능해진다.
• 반면 제어를 위임할수록 위임한 코드를 사용하는 코드에 대한 이해가 어려워지고, 가독성이 떨어진다는 단점도 있다.
• 이에 위임과 사용 용이성의 중심을 잘 잡는 것이 중요하다.