풀스택 웹개발 부트캠프 12주차 (2)

Component

• MVC View를 독립적으로 구성해 재사용할 수 있고, 새로운 컴포넌트도 만들 수 있음
• 데이터 (props) 를 입력받아 View 상태 (state) 에 따라 DOM Node 호출
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩 ⭕
• 컴포넌트명은 대문자로 시작

Component 트리 구조

Component 종류

함수형 Component

• 짧고 직관적
• Vanilla JS와 같은 기본적인 function 구조를 이용해 더 직관적 & 추상적
• 메모리 자원을 적게 사용
• 최근 사용 多 (Next.js는 거의 함수형만 사용하라고 할 정도)

function FuncComponent() {
  const class = "kdt8";
  
  return (
    <>
    	<div>{ class == "kdt8" ? "반가워요" : "누구..?" }</div>
    </>
  );
}

export default FuncComponent;

클래스형 Component

• state와 라이프 사이클 기능 이용 ⭕
• render( ) 필수

import { Component } from "react";

class ClassComponent extends Component {
  render() {
    const class = "kdt8";
    
    return (
    	<>
    		<div>{ class == "kdt8" ? "반가워요" : "누구..?" }</div>
    	</>
  	)
  }
}

export default ClassComponent;

export vs export default

4주차 (2) 게시글 참고

props

• properties를 줄인 표현
• 컴포넌트 속성을 설정할 때 사용하는 요소
• props는 컴포넌트끼리 값을 전달하는 수단
• 상위 컴포넌트 → 하위 컴포넌트 (단방향 데이터 흐름)

함수형 component props

• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받음

defaultProps

• 부모 컴포넌트에서 props가 전달되지 않았을 때, 기본값으로 보여줄 props 설정

props.children

• 부모 컴포넌트에서 자식 컴포넌트를 호출할 때, 태그 사이에 작성한 문자열

propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용
• JavaScript의 '유연한 특성'을 해결하기 위해 권장되는 기능
• 오류가 발생해도 실행 ⭕ (But, console에서 오류가 났음을 알려줌)

// App.js
<FuncComponent name="코딩온">children 내용</FuncComponent>

// FuncComponent.js
import PropTypes from "prop-types";
import { Component } from "react";

class ClassComponent extends Component {
  render() {
    return (
    	<>
    		<div>{ this.props.name }</div>
      		<div>{ this.props.children }</div>
    	</>
  	)
  }
}

ClassComponent.defaultProps = {
  name: "홍길동"
}

ClassComponent.propTypes = {
  name: PropTypes.string
}

export default FuncComponent;

클래스형 component props

// App.js
<ClassComponent name="코딩온">children 내용</ClassComponent>

// FuncComponent.js
import PropTypes from "prop-types";



const FuncComponent = (props) => {
  return (
    <>
    	<div>{ props.name }</div>
   		<div>{ props.children }</div>
    </>
  );
}

FuncComponent.defaultProps = {
  name: "홍길동"
}

FuncComponent.propTypes = {
  name: PropTypes.string
}

export default FuncComponent;