망할고양이의 도피처

Javascript의 map() 함수

자바스크립트 배열의 내장함수인 map을 활용하여 컴포넌트를 반복문처럼 렌더링할 수 있습니다. 

map 함수는 전달된 함수를 사용해서 배열 내에서 원하는 규칙에 따라 가공 후 새로운 배열을 생성할 수 있습니다.

[사용방법]

[예시 - 01 ] - 아래 내용을 개발자 도구에서 수행해 볼 수 있습니다.

var arr = [5, 4, 9, 7];

var result = arr.map(function(vv){
  return vv * vv;
});

//결과
result = [25, 16, 81, 49];

[예시 - 02 ] - ES6 문법으로 작성

const arr = [5, 4, 9, 7];
const result = arr.map(vv => vv * vv);

//결과
console.log(result);

방금 작성한 데이터 배열과 유사한 형태로 컴포넌트를 배열로 작성할 수 있습니다. 

component / IterPrc.js 파일을 생성합니다. 

export default function IterPrc(){


    const datas = ["1번","2번","3번","4번"];
    const dataList = datas.map((item,idx) => <li>{idx}{item}</li>);

    return (
        <>
            <ul>{dataList}</ul>
        </>
    );
}

propTypes를 지정하지 않았을 때 warning을 발생시키는 작업을 수행하도록 하겠습니다.

방법은 propTypes 작성시 뒷부분에 isRequired를 추가로 작성해주면 해당 기능을 사용할 수 있습니다. 

Props.js를 수정합니다.

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        <hr/>
        <div>isRequire Test : {props.isRequireTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
    , isRequireTest : PropTypes.string.isRequired
};

Apps.js를 수정하여 오류를 제거하도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest="99" isRequireTest="필수값을 넣었습니다.">내가 children이다 </Props>
    </div>
  );
}

export default App;

propTypes를 이용한 props의 Type 지정

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할때 propTypes를 사용하여 지정할 수 있습니다.

프로젝트의 규모가 커질 수록 예상할 수 없는 곳에서 발생하는 Error들이 있습니다. 이러한 Error를 예방하기 위해서는 PropTypes를 지정하고 타입(type)을 확인하는 것이 좋습니다.

방법은 이전 장에서 학습한 defaultProp와 유사하며 import구문을 이용하여 'prop-types'를 로드해야합니다.

Props.js 를 수정합니다. 

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
};

Apps.js도 prop 값을 추가로 전달하기 위해 수정합니다.

숫자값을 전달할 때에는 『 typeTest="99" 』가아닌 『 typeTest={99} 』 형태로 전달할 수 있습니다. 

『 typeTest="99" 』로 전달하는 경우 문자열로 인식되게 됩니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest={99} >내가 children이다 </Props>
    </div>
  );
}

export default App;

결과를 보면 타입을 string으로 지정하고 숫자 99를 전달하였지만 정상적으로 99가 표현됩니다. 

하지만 개발자 도구를 열어서 확인해보면 아래 그림과 같이 경고가 발생한 것을 확인할 수 있습니다. 

많은 종류의 PropTypers가 있으며 자세한 내용과 종류는 아래 링크에서 확인할 수 있습니다.

https://github.com/facebook/prop-types

children..?

props를 설명하는 글은 많지만 props 중 children을 설명하는 글을 본적이 없는것 같아서 작성하게 되었습니다.

리엑트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 prop가 children 입니다. 

Apps를 수정하여 알아보도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props>내가 children이다 </Props>
    </div>
  );
}

export default App;

children을 표현할수 있도록 Props 를 수정합니다..

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};

props

props는 properties를 가리키는 용어입니다. 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 

컴포넌트를 불러와 사용하는 상위 컴포넌트에서 설정할 수 있습니다. (강좌에서는 상위 컴포넌트 : App 입니다.)

component 하위에 props.js 파일을 하나 생성하도록 합니다. 

Props.js

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );

Apps.js를 아래와 같이 수정 합니다. 

Props.js에서 props값을 출력하도록 작성하고 Apps.js에서 props.name 값을 전달합니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="abcd"/>
    </div>
  );
}

export default App;

Apps에서 전달한 abcd 값을 삭제하면...?

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props/>
    </div>
  );
}

export default App;

값이 절달되지 않아 값의 출력이 없습니다. 그럼 기본값을 설정하는 defaultProps를 사용해보겠습니다. 

Props.js를 다시 수정하겠습니다.

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};

Component는 리액트에서 개발할 모든 애플리케이션의  최소단위의 조각입니다. 

Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다. 

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
• 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
• 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

https://ko.reactjs.org/docs/components-and-props.html

<함수형 컴포넌트 예시>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<클래스형 컴포넌트 예시>

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}