Components와 Props

🔎 React 공식문서 자료
React_Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

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

📑 참고자료
React : Components
devowen_[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

⚙️ 함수형 컴포넌트

• ES6 화살표 함수(arrow function)로 컴포넌트 정의 가능
• 클래스형 컴포넌트보다 선언하기 쉽고, 메모리 자원을 덜 사용
• return을 이용하여 JSX 반환
• Hook을 이용하면 클래스 컴포넌트의 기능을 사용할 수 있음 ▶ state, life cycle, render()함수, ...

// ✨ 일반 function 정의
// 자신이 종속된 객체를 this로 가리킴
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// ✨ arrow function정의
// 자신이 종속된 인스턴스를 가리킴
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

⚙️ 클래스 컴포넌트

• ES6 class를 이용하여 컴포넌트를 정의
• extends React.Component 속성 포함 ▶ 컴포넌트를 상속 받음
• render()함수를 이용하여 JSX 반환
• props 접근 시 this 키워드 사용

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

🛑 React 관점

• React 관점으로 볼 때 함수형과 클래스 유형은 동일하다.

컴포넌트 렌더링

⚙️ DOM 태그만 사용한 React 엘리먼트

const element = <div />;

⚙️ 사용자 정의 컴포넌트를 사용한 React 엘리먼트

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

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

⚙️ 코드 예시

1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 사용자 정의 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 props를 받아 <h1>Hello, Sara</h1>를 반환
4. ReactDOM은 <h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

🛑 컴포넌트의 이름

• 컴포넌트의 첫 문자는 항상 대문자로 시작
• ex) Welcome ⭕, welcome ❌

컴포넌트 합성

컴포넌트는 자심의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

⚙️ 예시 코드

• Welcome컴포넌트를 여러 번 렌더링하는 App컴포넌트

컴포넌트 추출

⚙️ 예시 코드 - 1

• 컴포넌트를 여러 개의 작은 컴포넌트로 나눔
• props 반영 : author, text, date
• 중첩 구조 : 변형과 재사용이 어려움
  

⚙️ 예시 코드 - 2

• Avatar 컴포넌트

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

• UserInfo 컴포넌트

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

⚙️ 예시 코드 - 3

• 컴포넌트 추출 → 재사용 가능한 컴포넌트 생성
• UI가 여러 번 사용되거나, UI 일부가 자체적으로 복잡한 경우 별도의 컴포넌트를 생성하는게 좋음
• 규모가 큰 작업을 할 때 두각을 나타냄

props는 읽기 전용

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체에서 props를 수정할 수 없다.

⚙️ 예시 코드 - 1

• 순수 함수 ⭕
• 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환

function sum(a, b) {
  return a + b;
}

⚙️ 예시 코드 - 2

• 순수 함수 ❌
• 자신의 입력값을 변경하기 때문에 순수 함수가 아님

function withdraw(account, amount) {
  account.total -= amount;
}

✨ props를 사용할 경우 주의 사항

• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함!!