컴포넌트

---

• 컴포넌트 : 화면을 나타내는 기본 단위
• React : 복잡한 UI를 여러 개의 컴포넌트로 구성되어 표현

첫 컴포넌트 만들기

복잡한 View를 여러 개의 컴포넌트로 구성하여 표현할 수 있다.

• src/components/HelloWorld.js

import React from "react";

export default function HelloWorld() {
    return (
        <div>
            <h1> Hello, World! </h1>
            <p> This is My first React Application</p>
        </div>
    )

}

• App.js
  

종류

함수형 컴포넌트

과거 : Props만 전달하고 뷰만 렌더링
현재 : Hook의 등장으로 클래스형 컴포넌트에서만 사용 가능한 side effect 등을 처리 가능, state 사용 가능

클래스형 컴포넌트 (요즘 자주 사용 X)

과거 : Props 뿐만 아니라 State를 사용해야 하는 경우
현재 : LifeCycle API를 사용해야 하는 경우

Props(Properties)

• 부모 컴포넌트로 전달받는 파라미터 (함수 인자와 비슷)
• 컴포넌트를 재사용이 가능하도록 하는 핵심
  • 같은 패턴의 UI를 구성할 때 재사용이 용이하다.
• 컴포넌트가 생성될 때 부모로부터 전달받음
• 컴포넌트 자체에서 고정된 상태로 남아있음(변하지 않는 값)
  → 컴포넌트 자체에서 변화시킬 수 없음.

예시

• CaptionImage 컴포넌트
  
• App.js : 부모 컴포넌트로부터 imgUrl과 caption을 받아 렌더링한다. -> 재사용이 가능하다
  

State

• State는 Props와 다르게 컴포넌트 자체적으로 가지고 있는 것.
• 컴포넌트 내에서 저장되고 유저의 이벤트나 시간에 따라 변화시킬 수 있는 값.
• 초기화가 반드시 필요 ⭐ ⭐ ⭐
  • 클래스형 컴포넌트 : this.state={}
  • 함수형 컴포넌트: useState()
• 보통 state는 서버에서 받아와서 사용하거나(회원정보, 게시글 등) 동적인 ui 핸들링 시에 사용 (이벤트 처리)
• state 관리가 React의 핵심!

함수형 컴포넌트

클래스형 컴포넌트

1. 생성자가 호출되면 super(props)를 호출해준다.
2.this.state = 객체 (보통 constructor or componentDidMount 함수에서 정의)
3. componentWillUnmount : 컴포넌트가 없어질 때 호출되는 함수

Props vs State

Props

• 부모 컴포넌트로 전달받는 파라미터!
• 컴포넌트를 재사용이 가능하도록 하는 핵심!
• 컴포넌트가 생성될 때 부모로부터 받고 컴포넌트에 고정된 상태로 남아있음. (변하지 않는 값)

State

• 컴포넌트 내에서 저장되고 유저의 이벤트나 시간에 따라 변화시킬 수 있는 값.
• 초기화가 반드시 필요. useState() or this.state={ }
• State 변경 판단은 주소값 비교
• State는 Props와 다르게 자체적으로 가지고 있는 것.
• 컴포넌트 내에서 저장되고 유저의 이벤트나 시간에 따라 변화시킬 수 있는 값