[ React ] JSX 이해하기 & Proptypes

component 

HTML 을 반환하는 함수 

component를 사용해서 

 

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

JSX 

javascrtip 안의 HTML

Component를 만들고 어떻게 사용하는지

<APP />

javascript + HTML의 조합

 

 

 

 

React 의 component 생성 흐름

react application은 오직 하나의 component만 rendering

따라서 -> 모든 것은 apapplication(API) 안에 들어가야함 

 

구현하고싶은 component 파일들을 만들어 API.js에 import 하고 

API.js를 index 에 렌더링하는 방식 

 

 

---

REACT의 속성을 이용하여 component 불러오기 

❖ 정적데이터 설정 (직접 넣어준 데이터) 

하지만 실제 웹사이트에서는 글씨를 일일히 칠 수 없다. json data를 가져온다.

 

component 의 props(속성)을 가지고 와서 사용 가능

ex) Food의 props 중 fav 를 가져옴  

 

props.fav  -> { fav }

처음부터 fav로 가져올 수 있음

 

---

❖ 동적 데이터 설정 ( json data )

 

 

* map 함수 

A.map

 

배열의 각 요소를 돌며 callback 함수를 실행하고  array 결과물을 만듦

 

react d의 모든 element 는 개별속성을 가져야 한다 - -> id 지정

 

//json data
const foodILike = [
    { 
      id:1,
      name:"waffle",
      image:"https://storcpdkenticomedia.blob.core.windows.net/media/recipemanagementsystem/media/recipe-media-files/recipes/retail/x17/2020_belgian-style-waffles_16700_600x600.jpg?ext=.jpg"
    },
    {
      id:2,
      name:"happy",
      image:"https://storcpdkenticomedia.blob.core.windows.net/media/recipemanagementsystem/media/recipe-media-files/recipes/retail/x17/2020_belgian-style-waffles_16700_600x600.jpg?ext=.jpg",
    }
  
]

//html 생성
function Food({name,pic}){

  return (
    <div>
      <h2>i love {name}</h2>
      <img src={pic} alt={name}></img>
    </div>
  );
}



//json data를 돌며 반복적으로 html 생성
function App() {
  return (
    <div>
      {foodILike.map(dish =>(
        <Food key ={dish.id} pic={dish.image}/>
      ))}

    </div>
  );
}

export default App;

함수로 빼줘도 가능

//html 생성
function Food({name,pic}){

  return (
    <div>
      <h2>i love {name}</h2>
      <img src={pic} alt={name}></img>
    </div>
  );
}


//component 속성 가져오기
function renderFood(dish){
  return <Food name={dish.name} pic={dish.image}/>
}



//json data를 돌며 반복적으로 html 생성 (renderFood)함수 이용
function App() {
  return (
    <div>
      {foodILike.map(renderFood) }
    </div>
  );
}

export default App;

 

 

하지만 

<Food key ={dish.id} pic={dish.image}/>

dish.image를 실수로 부르지 않았다면?

dish.id 가 없엇다면? 

오류가 생기게 되는데 이를 방지할 수 있다.

---

Proptypes ( props 유효성 검사 )

정확한 prop을 전달하는지 확인

 

 

1) prop-types 설치

올바른 props 가 전달되었는지 확인

npm i prop-types

 

2) Component 요소 밑에 protoTypes 로 유효성 검사 

Food.propTypes = {
  name:PropTypes.string.isRequired,
  pic:PropTypes.string.isRequired,
  rating:PropTypes.number.isRequired

}

❖ propTypes  

: 이 이름은 그대로 지정해야 함  ex) tamiTypes (X) 

 

❖ isReqired : 필수 요소

❖ number, string : 요소 의 의 형태 

 

그외 다양한 propTypes를 통해 유효성 검사를 할 수 있는 옵션들이 있음

ko.reactjs.org/docs/typechecking-with-proptypes.html

 

 

 

완성된 예제 

 

 

 

 

 

 

하지만 이 예제는 한계점이 있다.

jsondata 를 직접 하드코딩 한 것 

 

 

실제로는 하드코딩하지 않고 

동적인 data(dynamic data)를 이용하여 작업한다 

 

다음엔 동적 data를 활용하는 예제를  구현해보자