Front-end/React.js

2. JSX & Props - 웹 서비스 만들기 | 노마드코더

AGAL 2020. 3. 5. 22:35
반응형

[출처 : https://academy.nomadcoders.co]

0. Creating your first React Component

# component : HTML을 반환하는 함수    *<App /> : 컴포넌트를 사용하는 태그

 

# import React form "react";  파일 최상단에 이 코드가 없으면 해당 파일에 jsx가 있는 컴포넌트를 사용하는 것을 react는 이해하지 못함 

 

! react application이 하나의 컴포넌트만을 렌더링하며, 그 컴포넌트는 App이다. 따라서 다른 컴포넌트는 App 안에 위치해야 한다.

1. Reusable Components with JSX + Props

# jsx는 컴포넌트에 정보를 보낼 수 있다.

 

# props : 컴포넌트에서 하위 컴포넌트(Children component)로 정보를 보내는 방법    *property=value

 - value는 문자열, 불리언, 객체, 배열, 어떤 것도 올 수 있다.

 - 상위 컴포넌트의 props는 하위 컴포넌트의 arguments(인자)로 전달된다.

/* 상위 컴포넌트 */
function App(){
  return (
    <Gundam name="ASTARY" code="MBF-P02"/>
  )
}

/* 하위 컴포넌트 */
function Gundam({name,code}){    // props 디스트럭처링
  return <h2>I Like {code} {name} Gundam.</h2>
}
// 위 코드와 동일하다
function Gundam(porps){
  return <h2>I Like {porps.code} {porps.name} Gundam.</h2>
}

2. Dynamic Component Generation

# Array.map(callback(currentValue[, index[, array]])[, thisArg])

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

ㆍcallback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

  - currentValue처리할 현재 요소.

  - index(optional) : 처리할 현재 요소의 인덱스.

  - array(optional) : map()을 호출한 배열.

ㆍthisArg(optional) :callback을 실행할 때 this로 사용되는 값.

const gundamList = [
  {name:"Kyshatria", code:"NZ-666"},
  {name:"Astray", code:"MBF-P02"},
  {name:"Tollgeese", code:"OZ-00MS"}
]
function App() {
  return (
    {gundamList.map(ms => {
      return <Gundam name={ms.name} code={ms.code}/>
    })}
  )
}

// HTML View
I Like NZ-666 Kyshatria Gundam
I Like MBF-P02 Astray Gundam
I Like OZ-00MS Tollgeese Gundam

 

3. map Recap

! Warning: Each child in a list should have a unique "key" prop.

 : 모든 react의 element들은 유일해야 하는데 element들을 list 안으로 넣으면 유일성을 잃어버린다.

 ⇒ element 각 각에 id를 부여하고 "key" prop의 value로 해당 id 값을 부여한다.    * key={this.props.id}

4. Protection with PropTypes

> npm i prop-types  전달 받은 props가 원하는 props인 지를 확인

 * propTypes 로 코드를 써야한다.

import propTypes from "prop-types";

// 컴포넌트이름.propType = { 컴포넌트의 property : 체크하려는 타입}
Food.propTypes = {
  name : propTypes.string.isRequired,
  code : propTypes.string.isRequired,    // code가 string이 아니면 콘솔 에러
  rating : propTypes.number    // rating이 number 또는 undefined가 아니면 콘솔 에러
}

 

※ 확인 가능한 타입들

Array, boolean, function, number, object, string, symbol, node, element, instanceOf, Oneof, shape 등등

 

반응형