[영화 웹 서비스 만들기] #2 JSX & PROPS (2) (Key prop , alt, PropTypes)

본 포스팅은 리액트 JS를 다루고 있습니다.

#2.3 map Recap

Key prop (키 속성)

key prop을 작성하지 않고 위의 코드와 같이 실행시켰을 때 발생하는 오류이다.

위의 에러에 따르면 list내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 즉, 모든 react element들은 유일해야하고있다. 즉, 모든 react element들은 유일해야한다. list 안에 넣으면서 유일성을 잃어버리게 되므로 배열의 각각의 item에 id를 추가하고 component에 key라는 prop을 줌으로써 해결할 수있다.

 

위의 예시로 설명하면 배열에 있는 정보들은 모두 Food component 함수를 통해 Food component가 되고 우리에게 보여진다. 이렇게 모두 Food component가 되어버려 유일성을 상실한다. 결국 모든 element들이 Food component로 같아 보이게 되는 문제가 발생한다. 다른 이름, 다른 이미지를 가지고 있지만 react는 알지 못한다. 따라서 배열의 각각의 item에는 id를 추가하고 Food component에는 key라는 prop을 추가하여 이를 해결한다.

수정코드 (일부 발췌)

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    id: 2,
    name: "Samgyeopsal",
    image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
  },
  {
    id: 3,
    name: "Bibimbap",
    image: "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    id: 4,
    name: "Doncasu",
    image: "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  },
  {
    id: 5,
    name: "Kimbap",
    image: "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
  }
];

function renderFood(dish){
  return <Food key = {dish.id} name={dish.name} picture={dish.image} />

}

function App() {
  return (
    <div>
      {foodILike.map(renderFood)}
    </div>
  );
}

export default App;

여기서 key prop은 Food component로 전달되지 않는다. React 내부에서 사용하기 위해 적는 것이다.

+) alt prop

image element는 반드시 alt prop이 있어야 한다. alt prop은 시각 장애인들을 위한 속성이다.

#2.4 Protection with PropTypes

만약 Food component 속성(prop)중 받지 못하거나 잘못 받는 내용이 있다면 이것을 확인할 방법이 필요하다. 잘못된 정보를 client에게 보내고 user가 그걸 보고 이해하지 못하는 경우를 막기 위해서이다.

Props Types

설치

콘솔창에 npm i(install을 의미) prop-types를 하면 된다.

prop-types는 내가 전달 받은 props(속성들)이 내가 원하는 props인지를 확인해 준다. 설치가 다 되었는지 확인하려면 package.json 파일에 가서 "dependencies"에 prop-types가 있는지 확인해보면 된다.

사용법

먼저 PropTypes를 prop-types로 부터 improt 해준다.

import PropTypes from "prop-types";

prop types를 사용하고 싶은 component 함수 아래 다음과 같은 형식으로 적는다.

Food.propTypes = {
  // 여기에 내가 얻고 싶은 props(속성들)에 대한 설명을 적는다.
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired
};

Food.propTypes와 PropTypes.string.isRequired의 대소문자 구분에 유의하자. 또한 Food.propTypes의 propTypes는 다른 이름으로 바뀔 수 없다.

위의 예시에서 rating은 사실 number로 줬는데 string으로 받아야 한다고 되어있다. 이 경우 화면 출력에는 시각적인 에러가 나타나지 않지만 콘솔창을 보면 다음과 같은 에러를 볼 수 있다.

isRequired는 항상 쓸 필요는 없다. isRequired 을 없이 썼을 경우 값이 들어왔을 때만 PropTypes에 쓰여진 조건을 확인하고 값이 들어오지 않았으면 그냥 pass 한다. 즉, 위의 picture에서 예를 들면 undefined이거나 string이면 된다는 것이다.