웹개발 배워보자! - 리액트(3) | Component, map, props

Component

컴포넌트란?

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
- 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

- “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

컴포넌트의 종류

함수형 컴포넌트 (Stateless Functional Component)
- 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다.

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent;

위의 예시처럼 export 구문을 통해 가져와 사용할 수 있고, import할때 확장자를 생략할 수 있는데 이 이유는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 덕분이다. 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다.

 

2) 클래스형 컴포넌트 ( Class Component )

- 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. (리액트 생명주기는 따로 조금더 자세히 알아보도록 한다.)

- 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

함수형 컴포넌트가 사용하기 더 쉽기 때문에 주로 함수형 컴포넌트를 사용하고, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때가 있는데 이때 클래스형 컴포넌트를 활용한다.

 

map

map()이란? 

리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해준다. map() 함수는 배열안에 있는 각 원소를 변환할때 원소들을 이용하여 새로운 배열을 만들어주는 역할을 한다. 보통 반복문을 대체하여 사용한다.

 

for문과 map 비교

 

for문

const numbers = [1, 2, 3]
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i])
}

map

const numbers = [1, 2, 3];
const listItems = numbers.map((number, idx) => {
    console.log(number);
});

이러한 map에 대해 더 자세히 알아보자면

 - arr.map(callbackFunction, [thisArg])
 - arr.map(callbackFunction(currenValue, index, array), thisArg)

위의 두가지 방법으로 사용할 수 있다.

callbackFunction : 새로운 배열의 요소를 생성하는 함수로 세가지 인수를 갖는다.

 - currenValue : 현재 배열값

 - index : 현재 배열값 내의 인덱스 값

 - array : 현재 배열

thisArg : 콜백 함수 내부에서 사용할 this 컨퍼런스를 설정

 

props(프로퍼티)

- 프로퍼티, props(properties의 줄임말) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

 

ex) 1개의 props 넘기기

 

app.js (문자열은 큰따옴표( " " ) 를 사용하여 값을 전달) 

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main name="동덩"/>
      <Footer />
    </div>
  );
}

export default app;

index.js

import React from 'react';

function index(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default index;

위와 같은 방법으로 값을 넘겨줄 수 있다.

 

숫자를 넘겨줄때는 {}를 사용한다.

app.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main name={9} color="red"/>
      <Footer />
    </div>
  );
}

export default app;

 

프로퍼티의 Type

- 프로퍼티의 자료형을 미리 선언할 수 있다.
- 리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 버그예방에도 도움이 된다.
- 리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언하면 된다.

 

프로퍼티의 기본값 및 필수값 설정

1) 기본값 설정

 - 컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps를 설정하면 된다.

ex) Main.js (name 프로퍼티가 없는 경우, '디폴트'라는 값을 사용 하게 처리)

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정
Main.propTypes = {
  name: PropTypes.string
}

// 프로퍼티 기본값 지정
Main.defaultProps = {
  name: '디폴트'
}

export default Main;

app,js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function app() {
  return (
    <div>
      <Header />
      <Main color="blue"/>
      <Footer />
    </div>
  );
}

export default app;

 

2) 필수값 설정

- 디폴트 설정을 하지 않는 경우 해당 프로퍼티를 필수 프로퍼티로 선언 할 수도 있다.

ex) index.js (isRequired 를 통한 필수값 설정)

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function index({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정 및 필수값 설정
Main.propTypes = {
  name: PropTypes.string.isRequired,
}

export default index;