map, prop-types

map함수를 활용하여 배열에 있는 요소를 수정해주려고한다.

map은 array의 각 item에서 function을 실행하는 js function이며, function의 result를 갖는 array를 우리에게 다시 준다.

예를들어 아래와 같은 경우 배열은 [1,2,3,4] 에서 [0,0,0,0]으로 바뀌고 console.log에는 1 2 3 4가 각각 찍혀있는 것을 확인할 수 있다. 

쉽게말해서 map함수안에 함수가 있고 그 함수의 인자로 각 배열의 요소가 들어온다.  그리고 return값이 그 요소의 값으로 바뀐다. ( return이 없으면 undefined를 반환함 ) 하지만 원래의 값에는 영향을 주지 않는다.

const array = [1,2,3,4]
array.map((current) => {
    console.log(current)
    return 0
    }

따라서

const foodILike = [
  {
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
  },
  {
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg",
  },
  ]

이러한 배열을 만들고

map함수를 사용하여 각 배열의 요소의 값을 component의 props로 보내어 주면된다.

여기서 forEach는 안되나요? 라고 물어볼 수 있는데 forEach는 값을 return하지 않기에 아무 값도 나오지 않는다.

따라서 배열을 return하는 map함수를 써야만 화면에 잘 출력이 되는 것을 확인할 수 있다.

 

이렇게 화면에 잘 출력되는 것을 확인할 수 있다. 하지만 콘솔창을 보면

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

이러한 오류가 뜨는 것을 확인할 수 있는데 이건 Food component가 즉 div의 child들이 고유의 key값이 없기때문이다.

고유의 key값을 주어야 하는데

이렇게만 줘도 오류는 안난다. 

foodILike 배열에 각 id값을 0부터 ~ n까지 주고 key = dish.id을 주는 방식으로 하면 될 것 같다.

 

보다시피 key prop은 Food로 전달되지 않는다 이걸 사용하지 않기 때문이다. 기본적으로 react 내부에서 사용하기 위한거다.

우리가 원하는 props가 우리가 갖고 있는 props의 형태, 값과 일치하는지 체크하는 방법이 필요하다.

예를들어 image값에 true를 보내면 props는 전달이 되긴 되지만 형태,값이 일치하지 않아 파일이 깨지기 때문이다.

 

여기서 사용할 수 있는 것이 prop-types이다. npm i prop-types를 해주자

PropTypes를 import하고 

Food component에 propTypes를 지정해준다 . sexyTypes라던지 coolTypes는 안된다. 무조건 propTypes로 해줘야한다.

객체이므로 괄호를 열고 prop들의 이름을 적고 import한 PropTypes.string.isRequired를 해주었다.

string말고 number, symbol, array등 다양한 type이 올 수 있고 is Required는 꼭 값이 들어와야 한다. 만약 값이 없으면 오류가 발생한다. 적지 않아주면 값이 안들어와도 상관은 없지만 들어왔을 때 type은 꼭 number이어야 한다.

 

이렇게 우리가 type을 선언해줌으로써 원하는 type이 아니면 오류를 발생하도록 해주었다.