🔐 Archive/ReactJS

ReactJS로 웹서비스 만들기 2: Component

YoungRock 2020. 3. 5. 04:03

What is Component?

  • 리액트에서 새롭게 알게된 개념 component!
  • 리액트에서는 모든것을 component라고 한다
  • ex) 컴포넌트를 만들고, 컴포넌트가 데이터를 보여주게 하고, 컴포넌트를 보기 좋게 만들고..
  • Component란? HTML을 반환하는 함수

[Component의 형태]

// App.js
import React from 'react';

function App() {
  return <div>Helloddd!!</div>;
}

export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

index.js에서의 <App />

  • component는 react에서 이를 사용하여 HTML처럼 작성하려는 경우 필요하고,
  • javascript와 HTML 사이의 이러한 조합을 jsx라고 한다.
  • 리액트가 소개한 유일한 개념, 나머지는 Javascript에서 배움

Component 만들고 적용하기

1. src>Potato.js 파일 생성

import React from 'react';

function Potato(){
    return <h3>I love potato</h3>;
}

export default Potato;

 

2. Render는 하나의 컴포넌트만 render할 수 있다.

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

ReactDOM.render(<App /><Potato />, document.getElementById('root'));
//->이렇게 하면 에러

 

3. App.js에 Potato 컴포넌트를 삽입한다.

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

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato/>
    </div>
  );
}

export default App;

 

4. 결과

함수 형태로 컴포넌트 만들기

import React from 'react';

function Potato(){ 
  return <h3>I like potato</h3>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato/>
    </div>
  );
}

export default App;

 

[결과]

 

STEP 1 : 함수에 인자 넘기기

Food에 html 태그에 속성을 주는 것처럼 인자를 넘겨줄 수 있다.

Food 함수의 props를 콘솔창에 출력해보자

function Food(props){ 
  console.log(props);
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav = "kimchi" something = {true} papapapa = {["hello", 2, 4, true]}/>
    </div>
  );
}

Objecr가 출력

 

function Food(props){ 
  console.log(props.fav); // 이렇게 props(속성들)의 fav를 출력할 수 있다.
  return <h1>I like potato</h1>;
}

 

function Food({ fav }){ 
  return <h1>I like {fav}</h1>;
}

props.fav를 { fav }라고 표현할 수 있음

적용

import React from 'react';

function Food({ fav }){ 
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav = "kimchi" />
      <Food fav = "ramen" />
      <Food fav = "apple" />
      <Food fav = "watermelon" />
    </div>
  );
}

export default App;

STEP 2 : Map을 사용하여 코드 동적으로 만들기

  • map : 자바스크립트 함수로 배열의 각 값마다 for문을 돌려(php의 foreach처럼) 각각의 연산 결과(리턴값)로 배열을 만들어 리턴한다.

[코드 - App.js]

import React from 'react';

function Food({ name, picture }){ 
  return <div>
    <h1>I like {name}</h1>
    <img src = {picture} width = "100" />
  </div>;
}

const foodILike = [
  {
    name: "kimchi",
    image: 
    "https://cdn.crowdpic.net/detail-thumb/thumb_d_CDC14868821FF3F20C77BC8BC15E6355.jpg"
  },
  {
    name: "ramen",
    image:
    "https://w.namu.la/s/9f15f198aab1b14c8aa47e96a91a9d03331ecb7b5b892c803159d39b0d77ab4be30e2f15f66191284d7dad8371989329cc1c80810745e980a6949ae5e3589df6e4f89e2fc55dec82ee28cb5deaf225f3c0d5338120978f8abea5c7a239dab3a5"
  },
  {
    name: "apple",
    image:
    "https://4.bp.blogspot.com/-lH2oEm3FRO0/UrOcXcqEAkI/AAAAAAAAAcY/xM35DPAC3LM/s1600/apples_1_1_1_1_1.jpg"
  },
  {
    name: 'watermelon',
    image:
    "https://s3.ap-northeast-2.amazonaws.com/img.kormedi.com/news/article/__icsFiles/artimage/2018/07/05/c_km601/shutterstock_583745164_580.jpg"
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => <Food name = {dish.name} picture = {dish.image}/>)}
    </div>
  );
}

export default App;

{foodILike.map(dish => dish.name} picture = {dish.image}/>)}

[결과]

진짜 소름돋아서 계속 감탄했다. 너무너무 좋은 리액트.. 진작 배울껄ㅠㅠ

에러 fix

react의 배열에 각각 유니크한 key 값이 없어서 생기는 오류

해결

import React from 'react';

const foodILike = [
  {
    id: 1,
    name: "kimchi",
    image: 
    "https://cdn.crowdpic.net/detail-thumb/thumb_d_CDC14868821FF3F20C77BC8BC15E6355.jpg"
  },
  {
    id: 2, 
    name: "ramen",
    image:
    "https://w.namu.la/s/9f15f198aab1b14c8aa47e96a91a9d03331ecb7b5b892c803159d39b0d77ab4be30e2f15f66191284d7dad8371989329cc1c80810745e980a6949ae5e3589df6e4f89e2fc55dec82ee28cb5deaf225f3c0d5338120978f8abea5c7a239dab3a5"
  },
  {
    id: 3, 
    name: "apple",
    image:
    "https://4.bp.blogspot.com/-lH2oEm3FRO0/UrOcXcqEAkI/AAAAAAAAAcY/xM35DPAC3LM/s1600/apples_1_1_1_1_1.jpg"
  },
  {
    id: 4, 
    name: 'watermelon',
    image:
    "https://s3.ap-northeast-2.amazonaws.com/img.kormedi.com/news/article/__icsFiles/artimage/2018/07/05/c_km601/shutterstock_583745164_580.jpg"
  }
];


function Food({ name, picture }){ 
  return (
    <div>
      <h1>I like {name}</h1>
      <img src = {picture} width = "100" />
    </div>
  );
}

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

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

export default App;

 

데이터에 각 id지정하고 속성에 유니크한 key 값을 지정 -> 에러 해결!

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

prop-types

  • 설치: npm i prop-tyes

package.json 파일에서 설치완료 확인

  • prop-types은 우리가 컴포넌트를 정의할 때 어떤 속성(인자)이 필요한지, 인자의 이름은 무엇이고, 타입은 무엇인지, 인자가 반드시 필요한지 아닌지 등을 체크해주는 역할을 한다.
  • 함수가 코드를 사용하려는 곳과 같은 곳에 있다면 크게 어려움을 못느끼겠지만,
    내가 쓰려고하는 함수가 다른 파일에 있고, 인자도 여러개라면 이 인자가 string인지 int인지 헷갈리고, 이름이 image인지 Image인지 헷갈릴 수 있는데
    prop-types이 이를 다 확인하고 에러를 잡는다. 

사용

import React from 'react';
import PropTypes from 'prop-types';	// 추가

// rating 추가
const foodILike = [
  {
    id: 1, 
    name: "kimchi",
    image: 
    "https://cdn.crowdpic.net/detail-thumb/thumb_d_CDC14868821FF3F20C77BC8BC15E6355.jpg",
    rating: 5
  },
  {
    id: 2, 
    name: "ramen",
    image:
    "https://w.namu.la/s/9f15f198aab1b14c8aa47e96a91a9d03331ecb7b5b892c803159d39b0d77ab4be30e2f15f66191284d7dad8371989329cc1c80810745e980a6949ae5e3589df6e4f89e2fc55dec82ee28cb5deaf225f3c0d5338120978f8abea5c7a239dab3a5",
    rating: 4.9
  },
  {
    id: 3, 
    name: "apple",
    image:
    "https://4.bp.blogspot.com/-lH2oEm3FRO0/UrOcXcqEAkI/AAAAAAAAAcY/xM35DPAC3LM/s1600/apples_1_1_1_1_1.jpg",
    rating: 3
  },
  {
    id: 4, 
    name: 'watermelon',
    image:
    "https://s3.ap-northeast-2.amazonaws.com/img.kormedi.com/news/article/__icsFiles/artimage/2018/07/05/c_km601/shutterstock_583745164_580.jpg",
    rating: 4.5
  }
];


function Food({ name, picture, rating }){ 
  return <div>
    <h1>I like {name}</h1>
    <h3>{ rating }/5.0</h3>
    <img src = {picture} alt = {name} width = "100" />
  </div>;
}

// 반드시 propTyes여야 리액트가 확인할 수 있다.
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired
};

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

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

export default App;

ex) 만일 사용하는 인자의 타입이 다르다면 콘솔창에 에러 메세지를 출력한다.

매우매우 유용한 prop-types!

주의 할 점: 반드시 Food.propTypes라 해야 리액트가 확인 할 수 있다.

 

'🔐 Archive > ReactJS' 카테고리의 다른 글

[ReactJS error] event로 호출되는 함수 내의 함수가 안불러지는 이유?  (0) 2020.03.11
[ReactJS: 삽질로 얻은 것들] local json파일 불러오기, State에 Props값을 저장하고 싶은 경우 등  (1) 2020.03.11
[weather API] 날씨 API 사용해서 ReactJS로 웹페이지 만들기: 날씨 API 사용하는 방법  (0) 2020.03.11
ReactJS로 웹서비스 만들기 4: Movie app 만들기  (0) 2020.03.06
ReactJS로 웹서비스 만들기 3: State  (0) 2020.03.05

'🔐 Archive/ReactJS'의 다른글

  • 현재글ReactJS로 웹서비스 만들기 2: Component

관련글

티스토리툴바