[React 시작하기] 컴포넌트 (props)

react의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나눌 수 있다.

import React from 'react'
import './App.css'

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

export default App;

함수형

 

import React, { Component } from "react";

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

export default App;

클래스형

 

함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 클래스형 컴포넌트에서 state 기능 및 라이프사이클 기능을 사용할 수 있다는 점과 임의 메서드를 정의할 수 있다는 점이다.

 

하지만 함수형 컴포넌트는 선언하기에 더 쉽고 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 주요 단점은 state와 라이프사이클 메서드의 사용이 불가능하다는 점이었지만 Hooks 가 도입되면서 해결되었다.

 

앞으로 함수형 컴포넌트를 위주로 포스팅하겠다.

 

컴포넌트 생성

src/FirstComponent.js

import React from "react";

const Firstcomponent = () => {
  return <div>첫번째 컴포넌트입니다.</div>;
};

export default Firstcomponent;

src/App.js

import React from "react";
import FirstComponent from "./FirstComponent";

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

export default App;

서버를 돌리면 컴포넌트가 생성된 것을 확인할 수 있다.

 

 

Props

props를 사용해서 부모 컴포넌트에서 설정한 속성을 받아서 사용할 수 있다.

src/App.js

import React from "react";
import FirstComponent from "./FirstComponent";

const App = () => {
  return <FirstComponent name="리액트" />;
};

export default App;

부모 컴포넌트에서 이름이 name인 props를 줬다.

 

src/FirstComponent.js

import React from "react";

const Firstcomponent = (props) => {
  return <div>첫번째 {props.name} 컴포넌트입니다.</div>;
};

export default Firstcomponent;

props를 인자로 받아와서 그 안에 name을 뽑아 사용하는 걸 볼 수 있다.

 

 

만약 부모-> 자식 컴포넌트로 props 값을 주지않을 때를 대비해서 defaultProps를 사용하여 기본 값을 설정할 수도 있다.

src/FirstComponent.js

import React from "react";

const Firstcomponent = (props) => {
  return <div>첫번째 {props.name} 컴포넌트입니다.</div>;
};

Firstcomponent.defaultProps = {
  name: "props 없을 때 name",
};

export default Firstcomponent;

 

 

children props를 사용해서 컴포넌트 태그 사이의 내용을 보여줄 수도 있다. (대신 self-closing 태그는 불가)

src/App.js

import React from "react";
import FirstComponent from "./FirstComponent";

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

export default App;

src/Firstcomponent.js

import React from "react";

const Firstcomponent = (props) => {
  return (
    <div>
      <h1>첫번째 {props.name} 컴포넌트입니다.</h1>
      <h3>childeren 값 : {props.children}</h3>
    </div>
  );
};

Firstcomponent.defaultProps = {
  name: "props 없을 때 name",
};

export default Firstcomponent;

 

 

이 상태로 가게되면 props의 값이 많아질 때 떨어지는 가독성과 긴 코드를 선보일 수 있게 된다,,ㅋㅋ

이때 비구조화 할당 문법을 사용하면 간결하게 코드를 작성할 수 있다. b

src/Firstcomponent.js

import React from "react";

const Firstcomponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      <h1>첫번째 {name} 컴포넌트입니다.</h1>
      <h3>childeren 값 : {children}</h3>
    </div>
  );
};

Firstcomponent.defaultProps = {
  name: "props 없을 때 name",
};

export default Firstcomponent;

 

 

추가로, propsTypes를 사용하여 필수 props를 지정하고나 타입을 지정할 수 있다.

src/Firstcomponent.js

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

const Firstcomponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      <h1>첫번째 {name} 컴포넌트입니다.</h1>
      <h3>childeren 값 : {children}</h3>
    </div>
  );
};

Firstcomponent.defaultProps = {
  name: 3,
};

Firstcomponent.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Firstcomponent;

만약 부모 컴포넌트에서 string 이 아닌 props를 주게 되면 화면에는 보이지만 콘솔에 에러가 나는 것을 볼 수 있다.

또한 props를 주지 않았을 때도 콘솔에 에러가 난다.