[포스코x코딩온] 웹개발자 풀스택 과정 12주차 | Component, Props, Event Handling

Component란?

• 재사용이 가능한 각각의 독립된 모듈(재사용 가능한 UI코드 조각)
• MVC View를 독립적으로 구성해 재사용할 수 있고, 새로운 컴포넌트도 만들 수 있다.
• 데이터(props)를 입력받아 View 상태(state)에 따라 DOM Node를 호출한다.
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩이 가능하다.

함수(Function) 컴포넌트

• 함수형 컴포넌트는 말 그대로 자바스크립트의 함수(Function)기반 컴포넌트이다. 자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고, return문에 JSX 코드를 반환한다.
• Vanilla JS와 같은 기본적인 function 구조를 이용해 더 직관적이며 추상적이다.
• 메모리 자원을 덜 사용한다.

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

화살표 함수로도 표현가능

function FuncComponent = () => {
  cons class = "kdt";
  return();
}
export default FuncComponent;

함수 컴포넌트를 사용하는 이유

1. Hooks
   과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만, React v16이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다. Hook의 useState를 사용해 state를 관리할 수 있고, useEffect를 사용해 LifeCycle을 관리할 수 있다.
   
   
2. 직관적인 코드
   자바스크립트의 함수(function) 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 개발자에게 직관적이다.
   
   
3. 메모리 자원효율
   클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다.

클래스(Class) 컴포넌트

• 자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render()함수에서 JSX코드를 반환한다.
• state와 라이프 사이클 기능 이용가능
• Render 함수 필수

클래스 컴포넌트 특징

1. class 키워드로 클래스 컴포넌트 생성
2. React.Component 상속
   React의 ComponentClass를 상속받아 Component 상속이 필요
3. render()메서드 필수로 사용
   클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX를 리턴한다.
4. this 키워드 사용하기
   state, props, refs, 컴포넌트 메서드, 생명주기 메서드를 사용할 때 this로 프로퍼티를 참조하여 사용한다.

import { Component } from "react";

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

export default ClassComponent;

Props

• Props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 가짐
• 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능

함수형 컴포넌트 props

• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달 받으며, JSX 내부에서 {}기호로 감싸서 사용한다.

//부모 컴포넌트
<FuncComponent name="홍길동"></FuncComponent>

//자식 컴포넌트
const FuncComponent = (props) => {
  return (
    <>
    <div> 내 이름은 {props.name} </div>
	</>
   );
}

//결과
//내 이름은 홍길동

defaultProps

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

//부모 컴포넌트
<FuncComponent></FuncComponent>

//자식 컴포넌트
const FuncComponent = (props) => {
  return (
    <>
    <div> 내 이름은 {props.name}</div>
	</>
  );
}

FuncComponent.defaultProps = {
  name : '고길동'
}

//결과
//내 이름은 고길동

props.children

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

//부모 컴포넌트
<FuncComponent name="철수">난 자식이다</FuncComponent>

//자식 컴포넌트
const FuncComponent = (props) => {
  return (
    <>
    <div> 내 이름은 {props.name} </div>
	<div> {props.children} </div>
	</>
  );
}

//결과
//내 이름은 철수
//난 자식이다

propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용
• JavaScript의 "유연한 특성"을 해결하기 위해 권장되는 기능
• 정해진 타입이 아닌 다른 타입으로 정보가 전달될 시, 제대로 동작은 하지만 conole에 오류가 나온다.

import PropTypes from "prop-types";

FuncComponent.propTypes = {
  name : PropTypes.string	//string 타입으로 지정해줌
}

Event Handling

HTML Event

<button onclick="activeEvent();">버튼</button>

React Event

<button OnClick={activeEvent}>버튼</button>

주의점

1. React의 이벤트는 소문자가 아닌 카멜 케이스(camelCase)이용
2. JSX를 사용해 이벤트 핸들러 전달
3. 기본 DOM 요소에만 이벤트 설정 가능
   직접만든 컴포넌트에 이벤트 자체 설정 불가능(대신, props를 이용해 설정할 수 있음)
   ex)

<MyButton onClick={activeEvent}/> //버튼 이벤트 발생x

함수에 인자 보내기

• 화살표 함수 이용하기

<button onClick={()=> onClickEvent("인자1")}>클릭 이벤트</button>
<button onClick={(e)=> onClickEvent2("인자1")}>클릭 이벤트</button>

클래스 컴포넌트에서의 이벤트

• 클래스형 컴포넌트에서는 this를 사용해야 함수를 찾아갈 수 있다.
  (state, props와 동일)

<button onClick={this.printConsole}>printConsole2</button>
<button onClick={this.handleButton}>handleButton</button>

함수에서 this 사용하기

1. bind 사용하기

constructor(props) {
  super(props);
  
  this.eventExample = this.eventExample.bind(this);
}
eventExample(){
  console.log(this)
}

2. 화살표 함수 이용하기

eventExample2 = () => {
  console.log(this)
}

출처
https://life-with-coding.tistory.com/508
https://life-with-coding.tistory.com/509