복습
•
Counter.js 코드
import React from "react";
import {useState} from "react";
// let count = 0
// const countHandle = () => {
// // count++
// setCount(count + 1)
// console.log(count)
// }
function Counter() {
// const [변수명, set함수명] = useState()
const [count, setCount] = useState(0)
// count = 0
// setCount() => state 값을 변경해주는 함수, 실행 => 재 렌더링
return (
<div>
<p>총 {count}번 클릭!</p>
<button onClick={() => setCount(count + 1)}>
Click
</button>
</div>
)
}
export default Counter
JavaScript
복사
•
View - 클릭시 카운팅 됨
•
ToolBar.js
import React from "react";
function Toolbar({isLogin, onClickLoginHandle, onClickLogoutHandle}) {
// {a, b, c}
// const {isLogin, onClickHandle, onClickLogout} = props
return (
<div style={{ padding: 5, borderBottom: '1px solid gray' }}>
{isLogin && <h3>환영합니다.</h3>}
{
isLogin ?
<button onClick={onClickLogoutHandle}>로그아웃</button>
:
<button onClick={onClickLoginHandle}>로그인</button>
}
</div>
)
}
export default Toolbar
JavaScript
복사
•
View
합성
•
Containment
◦
여러 개의 children 집합이 필요한 경우 별도로 props를 정의해서 각각의 위치에 컴포넌트를 구성해준다.
import React from "react";
import { useState } from "react";
import Dialog from "./Dialog";
let room = []
function SignUpDialog(props) {
const [userName, setUserName] = useState('');
const handleClick = (event) => {
// 배열에 추가
room.push(userName)
setUserName('')
alert(`환영합니다!! ${userName}님 `)
}
return (
<Dialog title="스터디 팀 참여" message="이름을 입력하세요">
<input type="text" value={userName}
onChange={(event) => {
setUserName(event.target.value)
}}
/>
<button onClick={handleClick}>참여하기</button>
<div>
{
room.map((name, index) => {
return <p key={index}>{name}</p>
})
}
</div>
</Dialog>
)
}
export default SignUpDialog
JavaScript
복사
컨테이너형 컴포넌트와 프리젠테이션 컴포넌트
•
상위 컴포넌트는 다른 컴포넌트를 포함하는 일종의 컨테이너(container) 역할을 하는데 이러한 컴포넌트를 ‘컨테이너형 컴포넌트’ 라고 한다.
•
출력 위주의 하위 컴포넌트를 ‘프리젠테이션 컴포넌트’ 라고 한다.
•
컨테이너형 컴포넌트 특징
◦
하위 컴포넌트에 필요한 상태와 변수, 함수 등을 가지고 있고 필요할 때 하위 컴포넌트 들에게 이를 속성(props)으로 전달.
◦
컴포넌트들 간의 통신에서 컨트롤러 역할.
•
프리젠테이션 컴포넌트 특징
◦
주로 화면에 보여줄 내용을 구성하는 용도로 사용.
◦
상위 컴포넌트에서 전달된 속성(props)을 이용해서 상위 컴포넌트와 통신.
◦
하나의 기능에 중점을 두고 만들어지는 경우가 많음.
실습
•
하위 컴포넌트
◦
Container.js
import React, { useState } from "react";
import Display from "./Display";
function Container(props) {
// 하위 컴포넌트의 데이터를 관리, 관련된 핸들러 정의
// 하위 컴포넌트로 필요한 속성 전달
const menus = [
{mno: 1, name: '상품1', price: 3000},
{mno: 2, name: '상품2', price: 4000},
{mno: 3, name: '상품3', price: 5000},
{mno: 4, name: '상품4', price: 6000},
{mno: 5, name: '상품5', price: 7000},
]
//
const [selectedMenu, setSelectedMenu] = useState()
const changeMenu = (mno) => {
const menu = menu.find(m => m.mno === mno)
setSelectedMenu(menu)
}
return (
<div>
<Display arr={menus} changeMenu={changeMenu}></Display>
<div>선택제품의 설명</div>
</div>
)
}
export default Container
JavaScript
복사
•
Display.js
import React from "react";
function Display({ arr, changeMenu }) {
return (
<div style={{ border: '3px solid #333', padding: 10, width: 200 }}>
<ul>
{
arr.map(menu => {
// 반복해야 하는 항목에는 키가 있어야 한다
return <li key={menu.mno} onClick={() => changeMenu()}> {menu.name} </li>
})
}
</ul>
</div>
)
}
export default Display
JavaScript
복사
•
실습 - 간단한 단어를 배열로 관리하고 이를 등록/조회/삭제 하는 컴포넌트들 구성하기