React Component

component

• 앱을 이루는 최소한의 단위이며 이 컴포넌트들을 조합하여 앱이 만들어진다.
• 컴포넌트는 props 와 state를 다룬다.
  props : 부모 컴포넌트가 자식 컴포넌트에 주는 값이며 자식컴포넌트는 부모에게 받은 props를 직접 수정 할 수 없다.
  state : 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.

컴포넌트 기본구조

App.js에 import하여 불러오는 기본구조

MyComponent를 App.js 에 Import 해야만 인식하여 App.js에서 불러와 사용 할 수 있다. 컴포넌트는 html태그와 구분하기 위해 첫글자는 대문자로 입력한다.

위처럼 App.js에 MyComponent를 위와 같이 넣으면 MyComponent.js의 리턴값이 들어간다.

{props} 응용

ImgBox.js

---

import React from 'react';

const ImgBox = ({ src, alt }) => {
  return (
    <div className="imgBox">
      <img src={src} alt={alt} />
    </div>
  );
};

export default ImgBox;

---

Box.js

---

import React from 'react';
import ImgBox from './ImgBox';

const Box = ({ name, desc, date, src }) => {
  // name,desc,date ==> props
  return (
    <div className="box">
      <div className="padding">
        <ImgBox src={src} alt={name} />
        <div className="textBox">
          <strong>{name}</strong>
          <p>{desc}</p>
          <i>{date}</i>
        </div>
      </div>
    </div>
  );
};

export default Box;

---

props들을 호출하기 위해 html안의 값이 들어갈 곳을 {props} 들로 대치하여 넣는다.

App.js

---

import React from 'react';
import Box from './Box'; // Box 컴포넌트를 사용한다고 선언
import './index.css';

const productList = [
  // 상품정보 (리액트 특성상 키값을 등록하지 않으면 console에 에러가 나온다.)
  {
    id: 1,
    name: '신발',
    desc: '모자 상품설명',
    date: '2021-01-11',
    src: 'images/shoes.jpg',
  },
  {
    id: 2,
    name: '바지',
    desc: '바지 상품설명',
    date: '2021-01-21',
    src: 'images/pants.jpg',
  },
  {
    id: 3,
    name: '모자',
    desc: '모자 상품설명',
    date: '2021-01-31',
    src: 'images/cap.jpg',
  },
];

const App = () => {
  return (
    <div>
      <div className="boxList">
        {productList.map((obj) => {
          // productList에 있는 상품 정보들을 ES6 .map()함수를 이용하여
          // 배열의 모든 상품들을 매핑하여 각 값에 모두 매칭시킴
          return (
            <Box
              key={obj.id} // obj = productList의 배열요소
              name={obj.name}
              desc={obj.desc}
              date={obj.date}
              src={obj.src}
              alt={obj.name}
            />
          );
        })}
      </div>
    </div>
  );
};

export default App;

---