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
> 버튼사용 예시
// 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;
'• React' 카테고리의 다른 글
[React] Router (0) | 2021.10.24 |
---|---|
[React] React hook basic (0) | 2021.10.21 |
[REACT] State / Event (0) | 2021.09.04 |
[REACT] JSX / Component (0) | 2021.08.30 |
[REACT] React (0) | 2021.08.29 |