[React] 05. Component, Props

컴포넌트 Component

• 속성(Props)를 입력받아 React Element를 생성하여 반환해준다.
• 컴포넌트는 사용자 정의 태그라고 볼 수 있다.
• 반드시 대문자로 시작해야 함 소문자는 HTML태그
  • 소문자로 시작하는 JSX element는 HTML로 여겨진다.
• 함수형 컴포넌트 - 주로 사용
  • state, 라이프사이클 사용 불가능 => Hooks로 해결
• 클래스형 컴포넌트
  • render 함수가 가져야 한다.
    • 왜? - 클래스의 자체 구조 때문에
      • 함수형 컴포넌트는 리턴값을 가지는 함수이므로 리턴값이 JSX일 경우 React가 자동으로 렌더링 함
• index.js의 ReactDOM.render는 뭐지?
  • 최상위 컴포넌트를 렌더링 함
  • 하위 컴포넌트는 render 함수 또는 return값으로 UI를 정의해야 함
• 컴포넌트는 합성, 추출이 가능하다.

🔗웹 컴포넌트는 왜 등장했을까?

• 컴포넌트
  • 재사용이 가능하고 캡슐화되어있는 클래스 또는 그 클래스를 기반으로 생성되는 각각의 인스턴스
• CBA Component based Architecture의 핵심 원칙
  • 모듈성, 재사용성, 독립성
• 초기의 웹은 정적으로 처리되었으나,이후 상호작용하는 UI/UX의 수요가 증가하였다.
• 웹 애플리케이션의 복잡성이 증가하였고, 이를 관리하기 위해 CBA의 필요성이 제기 되었다.

합성 Composition

• 작은 컴포넌트들을 어떻게 조합할 것인가?

  function App() {
      return (
        <div>
        <Header /> 
        <Content />
        <Footer />
      </div>
    );
  }

전문화 Specialization

• 일반적 컴포넌트를 어떻게 특수하게 사용할 것인가?

• ex) 버튼 => 로그인 버튼 / 회원가입 버튼

  function UserWelcome({ username }) {
    return <Welcome text={`Hello, ${username}!`} />;
  }
  
  function GuestWelcome() {
    return <Welcome text="Welcome, Guest!" />;
  }
  
  function Welcome({ text }) {
    return <h1>{text}</h1>;
  }

---

속성 Props

• React Component의 property, 매개변수와 같은 역할

• 컴포넌트에 전달할 정보를 담고 있는 자바스크립트 객체

• Props는 읽기 전용, 값을 직접 바꿀 수 없다.

  • 단방향 데이터 흐름 유지, 불변성, 예측 가능성 등 때문
  • State를 사용하여 데이터를 변경하거나
  • 새로운 변수를 만들어서 사용해야한다.

• 비구조화 할당 = 구조 분해 문법 을 사용하여 props를 전달할 수 있다

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

---