React 컴포넌트(Component), 화살표 함수, Snippet

 

목차

클래스형 컴포넌트

---

 

컴포넌트를 선언하는 방식 2가지

 

1. 함수 컴포넌트

import "./App.css";

function App() {
  const name = "리액트";
  return (
    <>
      <div className="react">{name}</div>
    </>
  );
}

export default App;

 

• 장점
  • 선언하기 편리하다
  • 메모리 자원을 덜 사용한다
  • 최종 배포 후에도 파일 크기가 더 작다(근소한 차이. 성능과 크기면에서 큰 차이는 없음)
• 단점
  • state와 라이플사이클 API의 사용이 불가능하다 => v16.8이후 Hooks 라는 기능이 도입되며 해결됨
• 리액트 공식 메뉴얼에는 함수 컴포넌트와 Hooks의 사용을 권장함

 

2. 클래스형 컴포넌트

import { Component } from "react";

class App extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default App;

 

• 특징
  • state 기능 및 라이플 사이클 기능을 사용할 수 있다.
  • 임의 메서드를 정의할 수 있다. 

 

---

 

 

컴포넌트 생성

---

순서

    1. 파일 만들기

    2. 코드 작성하기

    3. 모듈 내보내기 및 불러오기

 

파일 생성 및 코드 작성

const MyComponent = () => {
  return <div>나의 첫 컴포넌트!</div>;
};

export default MyComponent;

 

 

 

모듈 내보내기(export)

export default MyComponent;

 

 

모듈 불러오기(import)

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

 

 

---

 

props

---

• properties(속성)의 줄임말. 컴포넌트 속성을 설정할 때 사용하는 요소
• 렌더링 할 때에는 { }를 사용함

//App.js

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent name="React" />;
};

export default App;

// MyComponent.js

const MyComponent = (props) => {
  return <div>내 이름은 {props.name}</div>;
};

export default MyComponent;

 

 

Props 기본값 설정 : defaultProps

//App.js

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

// MyComponent.js

const MyComponent = (props) => {
  return <div>내 이름은 {props.name}</div>;
};

export default MyComponent;

 

이렇게 하면 원래 되야하는데 작동하지 않는다

=> React17 이상부터는 함수형 컴포넌트에 defaultProps를 사용하는 것 보단

   기본 매개변수를 사용하는 것을 더 권장하기 때문

 

• 기본 매개변수를 사용하는 방법

// MyComponent.js

const MyComponent = ({ name = "기본이름" }) => {
  return <div>내 이름은 {name}</div>;
};

export default MyComponent;

 

 

children

• 컴포넌트 태그 사이의 내용을 보여주는 props

//App.js

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent>차일드</MyComponent>;
};

export default App;

// MyComponent.js

const MyComponent = (props) => {
  return <div>내 이름은 {props.children}</div>;
};

export default MyComponent;

 

 

비구조화 할당 문법

• = 구조분해문법
• `props.` 키워드를 매번 안붙여도 되서 간편하다

// MyComponent.js

const MyComponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      name :{name}
      childern : {children}
    </div>
  );
};

export default MyComponent;

 

 

• 함수의 파라미터 부분에서도 사용할 수 있다

// MyComponent.js

const MyComponent = ({ name, children }) => {
  return (
    <div>
      name :{name}
      childern : {children}
    </div>
  );
};

export default MyComponent;

 

 

 

 

propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용
• PropTypes를 import 하여 사용
• 만약 컴포넌트에 설정한 porps가 propTypes에서 지정한 형태와 일치하지 않으면 console에 오류 발생
• 종류 : array,  bool, func, number, object, node(렌더링할 수 있는 것. JSX 코드나 children도 포함), instance0f(특정 클래스의 인스턴스), one0f(['dog','cat'])(주어진 배열 요소 중 하나) ,any(아무종류)

// MyComponent.js
import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => {
  return (
    <div>
      name :{name}
      childern : {children}
    </div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;

 

 

isRequired

• `.isRequired`를 붙이면 필수 props를 지정할 수 있다
• 이 조건이 없으면 props가 전달되지 않은 상태에서 하위 컴포넌트에 {Number}를 써도 콘솔에 에러가 발생하지 않는다
• 하지만 이 조건이 있으면, 상위 컴포넌트에서 Number props를 전달하지 않으면 콘솔에 에러가 발생한다

MyComponent.propTypes = {
  name: PropTypes.string,
  Number: PropTypes.number.isRequired,
};

 

 

클래스형 컴포넌트에서 props 사용하기

• render 함수에서 this.props를 조회하면 된다

// MyComponent.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    const { name, number, children } = this.props;
    return (
      <div>
        <p>name : {name}</p>
        <p>children : {children}</p>
        <p>number : {number}</p>
      </div>
    );
  }
}

export default MyComponent;

 

• defaultProps와 propTypes는 함수컴포넌트와 같이 외부에 설정해도 되지만 내부에서 지정하는 방법도 있다

// MyComponent.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';

class MyComponent extends Component {
  static defaultProps = {
    name: '기본이름',
  };
  static propTypes = {
    name: PropTypes.string,
    number: PropTypes.number.isRequired,
  };
  render() {
    const { name, number, children } = this.props;
    return (
      <div>
        <p>name : {name}</p>
        <p>children : {children}</p>
        <p>number : {number}</p>
      </div>
    );
  }
}

export default MyComponent;

---

 

참고 개념1 : 화살표 함수

• 일반 함수 : 자신이 종속된 객체를 this로 가리킨다

function BlackDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: function () {
      console.log(this.name + ": 멍멍!");
    },
  };
}

const blackDog = new BlackDog();
blackDog.bark();        // 검둥이 : 멍멍!

 

• 화살표 함수 : 자신이 종속된 인스턴스를 this로 가리킨다

function WhiteDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: () => {
      console.log(this.name + ": 멍멍!");
    },
  };
}

const whiteDog = new WhiteDog();
whiteDog.bark();        // 흰둥이 : 멍멍!

 

• 화살표 함수 응용
  • 값을 연산하여 바로 반환할 때 사용하면 가독성을 높일 수 있음
  • { }가 없는 것은 연산한 값을 그대로 반환한다는 뜻

const triple = (val) => val * 3;

 

 

참고 개념2 :  Snippet 활용

• rsc 입력 후 엔터 : 함수 컴포넌트 생성
• scc 입력 후 엔터 : 클래스 컴포넌트 생성