리액트 컴포넌트와 props

컴포넌트란?

컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이며, 다른 하나는 클래스형 컴포넌트입니다. 클래스형 컴포넌트와 함수형이 어떻게 구성되어 있는지 다음 코드로 살펴봅시다.

import React from "react";
import "./App.css";

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

export default App;

import React, { Component } from "react";

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

export default App;

두 코드의 역할은 똑같습니다. 다만 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것입니다.

 

ES6 이전에는 자바스크립트에 클래스(class)가 없었습니다. 개념 자체는 있었지만, 그것을 구현하려면 class 대신에 prototype이라는 문법을 사용하여 다음과 같이 작업해야 했습니다.

function Dog(name){
  this.name = name;
}

Dog.prototype.say = function() {
  console.log(this.name + ': 멍멍');
}

var dog = new Dog('검둥이');
dog.say();		//검둥이: 멍멍

하지만 ES6 문법부터는 이것과 기능이 똑같은 코드를 class를 사용하여 다음과 같이 작성할 수 있습니다.

class Dog {
  constructor(name){
    this.name = name;
  }
  say() {
    console.log(this.name +': 멍멍');
  }
}

const dog = new Dog('흰둥이');
dog.say();		//흰둥이: 멍멍

클래스형 컴포넌트에서는 render함수가 꼭 있어야하고, 그 안에서 보여주어야 할 JSX를 반환해야합니다. 그렇다면 두 가지 방법중 어느 상황에 어떤형 컴포넌트를 사용해야 할까요?

 

먼저 함수형 컴포넌트의 장점은 클래스형보다 선언하기가 훨씬 편합니다. 메모리 자원도 클래스형보다 덜 사용합니다. 또한 빌드한 후 배포할 때도 함수형의 결과물의 파일 크기가 더 작습니다. (큰 성능차이는 없긴함) 단점으로는 state와 라이프사이클 API의 사용이 불가능하다는 점입니다. 이 단점은 16.8 업데이트 이후 Hooks라는 기능으로 해결되었습니다. 완전히 클래스형과 똑같이 사용할 수 있는 것은 아니지만 조금 다른 방식으로 비슷한 작업이 가능해 진겁니다. 

첫 컴포넌트 생성

첫 번째 컴포넌트를 만들어 봅시다.

파일 만들기 > 코드 작성하기 > 모듈 내보내기 및 불러오기

 

src 디렉터리에 MyComponent.js 파일 생성

파일을 생성하고 Reactjs Code Snippet을 설치했다면 rsc 후 엔터를 하게 되면 컴포넌트를 아주 쉽게 생성이 가능하다!

import React from "react";

const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트!</div>;
};

export default MyComponent;

이렇게 컴포넌트를 정의하고 다른 곳에서 사용하기 위해, 내보내기 키워드 export를 사용한다.

이번에는 App 컴포넌트에서 방금 생성한 컴포넌트를 불러와서 사용해봅시다.

import React from "react";
import "./App.css";
import MyComponent from "./MyComponent";

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

export default App;

props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App.js가 부모 컴포넌트)에서 설정할 수 있습니다.

JSX 내부에서 props 랜더링

우선 MyComponent를 수정하여 해당 컴포넌트에서 name이라는 props를 랜더링하도록 설정해 봅시다. props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있습니다. props를 랜더링할 때 2장에서 배운 것 처럼 JSX내부에 { }기호로 감싸주면 됩니다.

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요 제 이름은 {props.name}입니다.</div>;
};

export default MyComponent;


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

props 기본값 설정: defaultProps

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
  name: "기본 이름!"
};

export default MyComponent;

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있는데요, 바로 children입니다. 코드를 다음과 같이 수정해보세요.

import React from "react";

const MyComponent = props => {
  return (
    <div>
      안녕하세요 제 이름은 {props.name}입니다.
      <br />
      children 값은 {props.children} 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본 이름!"
};

export default MyComponent;

import React from "react";
import "./App.css";
import MyComponent from "./MyComponent";

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

export default App;

비구조화 할당 문법

props 값을 조회 할 때마다 props.name 같이 props라는 키워드를 붙여주고 있는데 이 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보겠습니다.

const MyComponent = props => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다.
      <br />
      children 값은 {children} 입니다.
    </div>
  );
};

이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있습니다. 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이죠. 아래의 예시 처럼 말입니다.

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다.
      <br />
      children 값은 {children} 입니다.
    </div>
  );
};

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 import구문으로 불러와야 합니다.

import React from "react";
import PropTypes from "prop-types";

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다.
      <br />
      children 값은 {children} 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본 이름!"
};

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

isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않았을 때 경고 메시지를 띄워주는 작업을 해봅시다. 뒤에 isRequired를 붙이면됩니다.

const MyComponent = ({ name, children, favoriteNumber }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name}입니다.
      <br />
      children 값은 {children} 입니다.
      <br />
      가장 좋아하는 숫자는 {favoriteNumber} 입니다.
    </div>
  );
};

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

export default MyComponent;

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

import React, { Component } from "react";
import PropTypes from "prop-types";

class MyComponent extends Comment {
  render() {
    const { name, children, favoriteNumber } = this.props;

    return (
      <div>
        안녕하세요 제 이름은 {name}입니다.
        <br />
        children 값은 {children} 입니다.
        <br />
        가장 좋아하는 숫자는 {favoriteNumber} 입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = {
  name: "기본 이름!"
};

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

거의 유사하게 사용이 가능하다.

 

 

 

출처 : 리액트를 다루는 기술