[react] 컴포넌트 만들기 (props 사용)

컴포넌트는 클래스 컴포넌트, 함수 컴포넌트가 있다.

초기에는 클래스 컴포넌트를 주로 사용하였으나 사용하기 불편하다는 의견이 많이 나와서, 이후에는 함수 컴포넌트를 개선해서 주로 사용하게 되었다. 함수 컴포넌트 개선 과정에서 개발된 것이 훅HOOK이란 것인데, 현재 거의 훅을 사용한다.

 

함수 컴포넌트

 

function Welcome(props){
	return <h1>안녕하세요, {props.name} </h1>;
}

->Welcome이름을 가진 함수는 props객체를 받아서 인사말이 담긴 리액트 엘리먼트를 return한다.(리액트 컴포넌트)

 

클래스 컴포넌트

 

class Welcome extends React.Component{
	render(){
    	return <h1>안녕하세요, {this.props.name}</h1>;
    }
}

->리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다.
(상속:한 클래스의 변수와 함수들을 상속받아 새로운 자식 클래스를 만드는 방법)
React.Component클래스를 상속받아 Welcome클래스를 만든 예시.(리액트 컴포넌트)

 

[ 사용방법 ]

1. 컴포넌트 이름 짓기

항상 대문자로 시작해야 된다. (리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 인식하기 때문)

 

//HTML div 태그로 인식함
const element=<div />;

//Hello 라는 리액트 컴포넌트로 인식함
const element = <Hello name="나나" />;

 

2.  컴포넌트 생성

1) 컴포넌트 만들기

import React from 'react';

const Component = () => {
  return <div>컴포넌트</div>;
};

export default Component; /*Component:임의*/

 

2) 모듈 내보내기 (export)

맨 아래에 코드 작성

export default Component;

 

3) 모듈 불러오기 (import)

App 컴포넌트에서 Component 컴포넌트를 불러와서 사용

import './App.css';
import Component from './Component';

function App() {
  return <Component />;
}

export default App;

 

3.  props (컴포넌트 속성 설정)

props는 컴포넌트 속성을 설정할 때 사용(지정), 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

함수의 파라미터로 받아와서 사용한다.

 

1) props 기본값 설정 : defaultProps

import React from 'react';

const Component = (props) => {
  return <div>안녕, 내 이름은 {props.name}라고 해.</div>;
};

export default Component;

 

import './App.css';
import Component from './Component';

function App() {
  return <Component name='nana'/>;
}

export default App;

 

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

 props.children은 컴포넌트의 <>여는 태그와 </>닫는 태그 사이의 내용을 포함합니다. 모든 컴포넌트에서 props.children를 사용할 수 있다.

 

function App() {
  return <Welcome>Hello!</Welcome>;
}

 

 

▲ 위의 Hello! 문자열은 Welcome 컴포넌트의 props.children으로 사용할 수 있다.

 

function Welcome(props) {
  return <p>{props.children}</p>;
}

 

▲ {props.children} 을 통해 태그안의 Hello!문자열을  불러옴

 

3)  비구조화 할당 문법을 통해 props 내부 값 추출하기

props 값을 조회할 때마다 props. 이라는 키워드를 앞에 붙여 주고 있는데(ex. props.name), 더 편하게 내부 값을 바로 추출하는 방법이 있다. 비구조화 할당(구조 분해 문법)은 객체에서 값을 추출하는 문법으로 함수의 파라미터 부분에서도 사용할 수 있다. (만약 함수의 파라미터가 객체일시, 그 값을 바로 비로 비구조화해서 사용하는 것 ) 

 

▼ 비구조화 할당 문법 적용

 

import React from 'react';

const Component = (props) => {
  const { name, children } = props;
  return (
    <div>
      안녕, 내 이름은 {name}라고 해.
      <br />
      children 값은 {children}
    </div>
  );
};

Component.defaultProps = {
  name: '나나',
};
export default Component;

 

▼ 함수의 파라미터 부분에 비구조화 할당을 적용

 

import React from 'react';

const Component = ({ name, children }) => {
  return (
    <div>
      안녕, 내 이름은 {name}라고 해.
      <br />
      children 값은 {children}
    </div>
  );
};

Component.defaultProps = {
  name: '나나',
};
export default Component;

 

4)  propTypes 를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 땐 propTypes를 사용한다.

 propTypes사용을 위해 우선 코드 상단에 import구문을 사용하여 불러온다.

 

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

const Component = ({ name, children }) => {
  return (
    <div>
      안녕, 내 이름은 {name}라고 해.
      <br />
      children 값은 {children}
    </div>
  );
};

Component.defaultProps = {
  name: '나나',
};

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

export default Component;

> propTypes으로 PropTypes.string을 작성하여, name값은 무조건 문자열의 형태로 전달해야 된다는 것을 설정 (만약 숫자로 전달하면 cosole에 경고메시지 출력됨)

 

▼ 또 다른 예시

import React from 'react';

const TestChildren = ({a,b,c}) => {
    // 위랑 동일 (props) => {const {a,b,c}=props; ~
    
    return (
        <div>
            <ul>
                <li>{a}</li>
                <li>{b}</li>
                <li>{c}</li>
            </ul>
        </div>
    );
};

export default TestChildren;

 

import React from 'react';
import TestChildren from '../TestChildren/TestChildren'

const a=10;
const b=20;
const c=30;

const Test = () => {
    return (
        <div>
            <TestChildren a={a} b={b} c={c}/>
        </div>
    );
};

export default Test;

 

import './App.css';
import Test from './Test/Test';

function App() {
  return (
    <div className="App">
    	<Test />
    </div>
   );
}

 

propTypes의 종류는 array, bool, func, number, string, object, symbol...등 다양함

 

 

 

 

 

 

 

reference : velog.io/@97godo