[REACT] Component / Props / Mock data

 

 

Rendering

 : 코드가 눈으로 볼 수 있도록 그려지는 것

 

ReactDom.render 함수 사용

> react요소가 DOM node에 추가되어 화면에 렌더됨

 첫 번째 인자 JSX로 react요소 인자로 넘김

 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소 전달

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

 

React element

: 리액트로 화면을 그려내는데 가장 기본적인 요소

JSX 문법으로 작성한 요소는 자바스크립트 객체가 됨 = 리엑트 엘리먼트

> ReactDOM.render 함수의 argument로 전달하게 되면, 리엑트가 객체 형태의 값을 해석해서 HTML형태로 브라우저에 띄움

 

 

 

 

React component

 

 

 : react element를 좀더 자유롭게 다루기 위한 하나의 문법/ 재사용 가능한 UI단위 

     (기능이 세부적으로 분리되어 있는 작은 단위)

  > 가장 간단한 방법은 자바스크립트의 함수를 활용 (함수명 첫글자는 대문자로)

  > input을 props라하고 return은 화면에 보여져야할 react요소

  > Function component : return > screen

     Class component : react compo로 부터 확장, render method > screen

                                            react는 자동으로 class compo의 render method를 실행

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

import Dice from './Dice';

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

export default App;

 

ex) nav component만들어서 여러 페이지에 적용하기

 

//TopNav.js
import React, { Component } from 'react';

class TopsNav extends Component {
  render() {
    return (
        <nav className="navbar">
          <a id='logo' href="#!">
            <img src = "/images/logo.PNG" alt="logo"/>
          </a>
          <ul id='navMenu'>
            <li><a href='#!'>COFFEE</a></li>
            <li><a href='#!'>MENU</a></li>
            <li><a href='#!'>STORE</a></li>
            <li><a href='#!'>WHAT'S NEW</a></li>
          </ul>
        </nav>
    );
  }
}

export default TopsNav;

// List.js
//import React, { Component } from 'react';
import TopsNav  from '../TopsNav';
//import {Link} from 'react-router-dom';
//import './List.scss';

class List extends Component {
  render() {
    return (
      <div>
        <TopsNav />
        <section className="menubar1">
        ~~~~~~~~~~~~~

---

 

 

Props

= Properties  컴포넌트의 속성값

 

 

 >  Props를 통해 부모 compo가 자식 compo에게 데이터 전달 가능 ( 이름 = "값" 의 형태)

import LoginButton from './Button';

// 부모
class LoginPage extends React.Component {
  render() {
    return (
      <div>
        <LoginButton text="확인" size="big"/>
      </div>
    )
  }
}


class LoginButton extends React.Component {
   render() {
     return (
       <button className={this.props.size}>
         {this.props.text}
       </button>
     )
   }
}

 

> props 가져오기

 

 props.name

function Food(props) {
  return <h3>i like {props.name}</h3>
}

비구조할당 ({name}) 

function Food( {name} ) {
  return <h3>i like {name}</h3>
}

 

 

> 가져오는 props없을 때 기본 props값 지정

function App() {
  return (
    <div>
      <Hello name="react" color="red" />
      <Hello color="blue" />
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음",
};

 

> {children} 태그와 태그사이에 넣는 내용 

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: 16,
  };
  return <div style={style}>{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" />
      <Hello color="blue" />
    </Wrapper>
  );
}

{children} = <Hello /> <Hello />

 

 

 

---

 

 

 

Mock Data

개발자 필요에 의해 샘플로 만든 데이터(실제 api아님)

: api 준비중일 때

: backend와 소통 효율적으로 가능 (key-value값 미리 맞춰볼 수 있음

> .js 파일로 데이터를 분리

>  mock data에 img있을때 .jpg .png 붙여라ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ

 

https://ko.reactjs.org/docs/thinking-in-react.html

React로 사고하기 – React

 

 

> 버튼사용 예시

// mockData.js
const BUTTON_DATA = [
     //하나의 객체들
	{id: 1,
      text: "첫 번째 버튼",
      size: "big"
	},
	{id: 2,
      text: "두 번째 버튼입니다!",
      size: "small"
	},
	{id: 3,
      text: "마지막 button",
      size: "big"
	}	
]
export default BUTTON_DATA;

// Page.js (map이용)
import Button from './Button';
import BUTTON_DATA from './mockData.js'

class LoginPage extends React.Component {
  render() {
    return (
     <div>
        //buttonData는 object
       {BUTTON_DATA.map(buttonData=>{
         return (
          <Button
      key={buttonData.id} 
      text={buttonData.text}
      size={buttonData.size} 
     />)})}</div>)}}

> mockdata(map), props 분리 활용 예시

const data = [
	{
      id: 1,
      img: "https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/social/mushroom.jpg",
      name: "맛타리 버섯 200g",
      price: "1,000원"
	}, 
   ~~~~~~~~~~~~
 ]

// Step 1. 하나의 컴포넌트에 map 사용하여 구현
  <div className="card-wrap">
    {data.map((element, index) => {
      return (
        <div key={index} className="card">
          <img src={element.img} />
          <div className="product-detail">
            <p className="product-name">{element.name}</p>
            <p className="product-price">{element.price}</p>
          </div>
        </div>
      );
    })}
  </div>

//Step 2. 컴포넌트 분리 + map 사용하여 구현하기

//밑에 틀을가져와서 mockdata가져와서 합침
import React from "react";
import Card from './components/Card';

class CardsWithTitle extends React.Component {
	render() {
		/*
        <div className="kurly-page">
		  <div className="title-wrap">
		    <p className="title">늘 기분 좋은 가격</p>
		    <p className="sub-title">가격부터 늘 기분 좋은 컬리 장바구니 필수템</p>
		  </div>
          */
		  <div className="card-wrap">
		    {data.map((product, index) => {
		      return (
		        <Card key={index} img={product.img} name={product.name} price={product.price} />
		      );
		    })}
		  </div>
		</div>
	}
}

//얘는 틀역할
import React from "react";

class Card extends React.Component {
	render() {
	  return (
	    <div className="card">
	      <img src={this.props.img} />
	      <div className="product-detail">
	        <p className="product-name">{this.props.name}</p>
	        <p className="product-price">{this.props.price}</p>
	      </div>
	    </div>
	  )
	}
};

export default Card;