- React Programming
- 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC 프레임워크와 달리 오직 View만 신경 쓰는 라이브러리이다. 리액트 프로젝트 등 에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트라고 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
- Node.js, VSC 필요
- yarn 설치
// 설치
npm install -g yarn
// 설치확인
yarn -v
- 기존에 작업하던 C드라이브\프로젝트 폴더에 react 프로젝트 폴더를 새로 만든다.
- VSC 실행
- ctrl +` 터미널 실행
yarn create react-app 프로젝트명
- ex01 프로젝트로 이동
C:\data\react>cd ex01
- yarn 시작
C:\data\react>ex01\yarn start
- 프로젝트를 익스플로러에서 신규로 생성된것을 확인가능하다.
- 리엑트는 알아서 서버를 지정해준다.
- C:\data\react\ex01\src\App.js
- 메인 페이지 이다.
- jsx 문법을 이용한다.
C:\data\react\ex01\src\App.css
h1, h2{
text-align: center;
}
C:\data\react\ex01\src\App.js
import './App.css';
function App() {
// 변수를 선언하여 return 안에서 사용 가능하다.
const name = "react";
return (
<div>
{/* 사용시 아래와 같이 중가로를 사용한다. */}
<h1>{name} 안녕</h1>
<h2>{name} 그래</h2>
</div>
);
}
export default App;
- 삼항연산자도 가능하다.
import './App.css';
function App() {
// 변수를 선언하여 return 안에서 사용 가능하다.
const name = "react";
return (
<div>
{/* 사용시 아래와 같이 중가로를 사용한다. */}
<h1>{name} 안녕</h1>
<h2>{name} 그래</h2>
{/* 삼항연산자 사용 가능 */}
{name === '리액트' ? <h2>리액트입니다.</h2>:<h2>리액트가 아닙니다.</h2>}
</div>
);
}
export default App;
- 페이지가 출력되는 경로
- C:\data\react\ex01\public\index.html
- C:\data\react\ex01\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();root 에다가 "import App from './App';"이라는 컴포넌트를 실행하고 같은 폴더에 있는 app.js를 출력하게 된다.
그래서 위와 같이 웹에서 페이지를 출력할 수 있는 것이다.
만약에 페이지를 수정하고 싶으면 App.js(C:\data\react\ex01\src\App.js)에서 수정하면 된다.
- react 문법을 더 익혀보자.
- div를 .header로 지정하고
import './App.css';
function App() {
// 변수를 선언하여 return 안에서 사용 가능하다.
const name = "react";
return (
<div class="header">
{/* 사용시 아래와 같이 중가로를 사용한다. */}
<h1>{name} 안녕</h1>
<h2>{name} 그래</h2>
{name === '리액트' ? <h2>리액트입니다.</h2>:<h2>리액트가 아닙니다.</h2>}
</div>
);
}
export default App;
h1, h2{
text-align: center;
}
.header{
background-color: yellow;
}
- 함수형 컴포넌트를 보통 이용한다.
- 컴포넌트는 필요할때마다 tag처럼 재사용이 가능하다.
1. 일반적 함수형
function App() {
}
return (
}
export default App;
2. 화살표 함수형
const App = () => {
}
return (
}
export default App;
- 기존에 사용했던 페이지 틀을 컴포넌트를 이용해서 만들어보자.
- C:\data\react\ex01\src\(new)components
- C:\data\react\ex01\src\components\(new)Header.js
const Header = () => {
return(
<div className="header">
<h1>이주성의 쇼핑몰</h1>
</div>
)
}
export default Header;
- app.js에 import 하여 웹에 출력하겠다.
- C:\data\react\ex01\src\App.js
import './App.css';
import Header from './components/Header';
function App() {
return (
<div>
<Header/>
</div>
);
}
export default App;
- C:\data\react\ex01\src\components\(new)Center.js
const Center =()=>{
return(
<div className="center">
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
</div>
)
}
export default Center;
- C:\data\react\ex01\src\App.js
import './App.css';
import Center from './components/Center';
import Header from './components/Header';
function App() {
return (
<div>
<Header/>
<Center/>
</div>
);
}
export default App;
- C:\data\react\ex01\src\components\(new)Footer.js
const Footer =()=>{
return(
<div className="footer">
<h3>Copyright 2021. 이주성의 쇼핑몰 All rights reserved.</h3>
</div>
)
}
export default Footer;
- C:\data\react\ex01\src\App.js
import './App.css';
import Center from './components/Center';
import Footer from './components/Footer';
import Header from './components/Header';
function App() {
return (
<div>
<Header/>
<Center/>
<Footer/>
</div>
);
}
export default App;
- css를 변경해보겠다.
h1, h2,h3{
text-align: center;
}
.container{
width: 960px;
margin: 0px auto;
}
.header{
background-color: red;
text-align: center;
}
.center{
background-color: green;
padding: 10px;
}
.footer{
background-color: blue;
}
- center 컴포넌트에 넣을 menu, about를 만들어보겠다.
- C:\data\react\ex01\src\components\(new)Menu.js
const Menu =()=>{
return(
<div>
<a href="/">상품관리</a>
<a href="/">업체관리</a>
</div>
)
}
export default Menu;
C:\data\react\ex01\src\components\(new)About.js
const About = () => {
return(
<div className="center">
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
<p>이것이야말로 그들은 소리다.이것은 인생을 봄바람이다. 예가 있는 앞이 가장 투명하되 끓는 그들은 약동하다. 대고, 든 풍부하게 사랑의 행복스럽고 것이다. 방황하여도, 이상 같으며, 얼마나 미묘한 것이다. 천자만홍이 간에 스며들어 보라. 풀밭에 이는 소리다.이것은 많이 피부가 얼음과 긴지라 것이다. 충분히 바이며, 발휘하기 일월과 얼음과 않는 영원히 뜨고, 운다. 주는 물방아 투명하되 있는 이것이다. 더운지라 그들은 구하기 운다.</p>
</div>
)
}
export default About;
- C:\data\react\ex01\src\App.css
h1, h2,h3{
text-align: center;
}
.container{
width: 960px;
margin: 0px auto;
}
.header{
background-color: red;
text-align: center;
}
.center{
background-color: green;
padding: 10px;
}
.menu{
background-color: burlywood;
padding: 10px;
}
.about{
background-color: cadetblue;
padding: 10px;
}
.footer{
background-color: blue;
}
- props
- index.html 에서 가장 먼저 실행되며 root를 통해 index.js에서 app.js를 연결한다. app.js에서 웹에 보여질 html을 입력하면 된다. react는 component의 조합을 통해서 페이지를 출력한다.
- props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다.
- 컴포넌트의 props의 속성이름을 지정해주면 자식 컴포넌트에서 매개변수를 통해 사용할 수 있다.
import './App.css';
import Center from './components/Center';
import Footer from './components/Footer';
import Header from './components/Header';
function App() {
return (
<div className="container">
<Header name="심청이" system="학사관리"/>
<Center/>
<Footer company="ICIA" year="2021"/>
</div>
);
}
export default App;
- C:\data\react\ex01\src\components\Header.js
const Header = (props) => {
// 지정
const{name,system} = props;
return(
<div className="header">
{/* <h1>{props.name}의 {props.system}</h1> */}
<h1>{name}의 {system}</h1>
</div>
)
}
export default Header;
- C:\data\react\ex01\src\components\Footer.js
const Footer =(props)=>{
const{year,company}=props;
return(
<div className="footer">
{/* <h3>Copyright {props.year}. {props.company}의 쇼핑몰 All rights reserved.</h3> */}
<h3>Copyright {year}. {company}의 쇼핑몰 All rights reserved.</h3>
</div>
)
}
export default Footer;
- 마찬가지로 center라는 부모컴포넌트에서 menu, about 컴포넌트에 props를 이용해 속성을 지정해보도록 하겠다.
- C:\data\react\ex01\src\App.js
<Center name="심청이"/>
- C:\data\react\ex01\src\components\Center.js
import About from "./About";
import Menu from "./Menu"
const Center =(props)=>{
return(
<div className="center">
<Menu item1="교수관리" item2="학생관리" item3="강좌관리" name={props.name}/>
<About name={props.name}/>
</div>
)
}
export default Center;
- C:\data\react\ex01\src\components\Menu.js
const Menu =(props)=>{
const{item1,item2,item3,name}=props
return(
<div className="menu">
<h3>{name}</h3>
- C:\data\react\ex01\src\components\About.js
const About = (props) => {
return(
<div className="about">
<h1>제 이름은 {props.name} 입니다.</h1>
- state
리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 리액트에는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다.
함수형 컴포넌트에서 useState 사용하기 : useState 함수의 인자에는 상태의 초깃값을 넣어 준다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 하는데 useState에서는 반드시 객체가 아니어도 상관없다. 함수를 호출하면 배열이 반환되는데 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어주는 함수이다. 이 함수를 세터(Setter) 함수라고 부른다. 그리고 배열 비구조화 할당을 통해 이름 을 자유롭게 정해 줄 수 있다.
- C:\data\react\ex01\src\components\(new)Say.js
import {useState} from 'react';
const Say = () => {
// 변수 , 변수변경 메서드 = 초기값
const [message, setMessage] = useState('여기에 출력')
// 함수정의
// 위의 변수변경 메서드를 이용해 useState에 초기값을 message
// 를 통해서 함수를 통해 변경해준다.
const onClickEnter = () => {
setMessage("안녕하세요.")
}
const onClickLeave = () => {
setMessage("안녕히가세요.")
}
return(
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
)
}
export default Say;
- C:\data\react\ex01\src\App.js
import './App.css';
import Say from './components/Say';
function App() {
return (
<div>
<Say/>
<hr/>
<Say/>
</div>
);
}
export default App;
- counter component를 만들어서 +, - 작업을 해보겠다.
- C:\data\react\ex01\src\components\(new)Counter.js
import {useState} from 'react';
const Counter = () =>{
const [number,setNumber]=useState(1000)
const onIncrease =()=>{
setNumber(number+1)
}
const onDecrease =()=>{
setNumber(number-1)
}
return(
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>증가</button>
<button onClick={onDecrease}>감소</button>
</div>
)
}
export default Counter;
- C:\data\react\ex01\src\App.js
import './App.css';
import Counter from './components/Counter';
function App() {
return (
<div>
<Counter/>
<hr/>
<Counter/>
</div>
);
}
export default App;
- 이벤트 핸들링
사용자가 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 마우스 커서를 올려놓았을 때는 mouseover 이 벤트를 실행하고 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onChange 이벤트를 실행한다. 이벤트를 사용할 때 주 의 사항은 아래와 같다.
- 이벤트 이름은 카멜 표기법으로 작성한다.
- 이벤트에 실행할 자바스크립트의 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
- DOM 요소에만 이벤트를 설정할 수 있다.
- onClick 이벤트 설정
- C:\data\react\ex01\src\components\(new)Toggle.js
import { useState } from "react";
const Toggle =()=>{
const [toggle, setToggle] = useState(false);
const onClick =() =>{
setToggle(!toggle);
}
return(
<div>
<button onClick={onClick}>{toggle ? 'On':'OFF'}</button>
</div>
)
}
export default Toggle;
- C:\data\react\ex01\src\App.js
import './App.css';
import Toggle from './components/Toggle';
function App() {
return (
<div className="container">
<Toggle/>
</div>
);
}
export default App;
- onChange 이벤트 설정
- C:\data\react\ex01\src\components\(new)Change.js
import {useState} from "react";
const Change = () =>{
const[message,setMessage] = useState('여기')
const onChangeMessage = (e) => {
setMessage(e.target.value);
}
return(
<div>
<h1>Change Event 연습</h1>
<input type="text" onChange={onChangeMessage}/>
<button>확인</button>
<h1>{message}</h1>
</div>
)
}
export default Change;
- C:\data\react\ex01\src\App.js
import './App.css';
import Change from './components/Change';
function App() {
return (
<div className="container">
<Change/>
</div>
);
}
export default App;
- onclick 하여 alert되는 작업을 하도록 하겠다.
import {useState} from "react";
const Change = () =>{
const[message,setMessage] = useState('여기')
const onChangeMessage = (e) => {
setMessage(e.target.value);
}
const onClick =() =>{ // new
alert(message);
setMessage('');
}
return(
<div>
<h1>Change Event 연습</h1>
<input type="text" onChange={onChangeMessage} value={message}/>
<button onClick={onClick}>확인</button>
<h1>{message}</h1>
</div>
)
}
export default Change;
- onKeyPress 이벤트 핸들링
- C:\data\react\ex01\src\components\(new)Keypress.js
import { useState } from "react";
const Keypress =() =>{
const [name, setName] = useState('');
const [message, setMessage] = useState('');
const onClick = () =>{
alert(`${name}/${message}`);
setName('');
setMessage('');
}
return(
<div>
<hr/>
<h1>Keypress 이벤트 연습</h1>
<input type="text" placeholder="사용자 이름" value={name}
onChange={(e)=>{setName(e.target.value)}}/>
<hr/>
<input type="text" placeholder="메시지 내용을 입력하세요." value={message}
onChange={(e)=>{setMessage(e.target.value)}}/>
<hr/>
<button onClick={onClick}>확인</button>
<h1>{name} : {message}</h1>
</div>
)
}
export default Keypress;
C:\data\react\ex01\src\App.js
import './App.css';
import Keypress from './components/Keypress';
function App() {
return (
<div className="container">
<Keypress/>
</div>
);
}
export default App;
- 또는
const onKeyPressMessage =(e)=>{
if(e.key === 'Enter'){
onClick();
}
} <hr/>
<input type="text" placeholder="메시지 내용을 입력하세요." value={message}
onChange={(e)=>{setMessage(e.target.value)}} onKeyPress={onKeyPressMessage}/>
<hr/>
- C:\data\react\ex01\src\components\(new)Address.js
import {useState} from 'react';
const Address = () =>{
// 초기값 세팅
const [form,setForm] = useState({
username:'홍길동',
tel:'032-873-7723',
address:'인천시 미추홀구 학익동'
})
// form에서 하나씩 할당받겠다.
const {username,tel,address} = form;
const onChangeForm = (e) => {
const nextForm = {
...form,
[e.target.name]:e.target.value
};
setForm(nextForm)
}
const onClickConfirm =() =>{
alert(`${username}\n${tel}\n${address}`);
setForm({
username:'',
tel:'',
address:''
});
}
const onKeyPressAddress =(e) => {
if(e.key==='Enter'){
onClickConfirm();
}
}
return(
<div>
<h1>주소록</h1>
<input type="text" placeholder="이름입력" value={username} name="username" onChange={onChangeForm}/><br/>
<input type="text" placeholder="전화번호입력" value={tel} name="tel" onChange={onChangeForm}/><br/>
<input type="text" placeholder="주소입력" value={address} name="address" onChange={onChangeForm} onKeyPress={onKeyPressAddress}/><br/>
<button onClick={onClickConfirm}>확인</button>
<hr/>
<h1>이름:{username}</h1>
<h1>전화번호:{tel}</h1>
<h1>주소:{address}</h1>
</div>
)
}
export default Address;
- 데이터 배열을 컴포넌트 배열로 변환하기 : 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해 반복되는 컴포넌트를 렌더링 한다.
- C:\data\react\ex01\src\components\(new)List.js
const List =() =>{
// 데이터 배열
const fruits =['사과','바나나','수박','딸기'];
// 반복메서드
const list = fruits.map((fruit,index)=>(
<h2 key={index}>{index} : {fruit}</h2>
));
// 데이터 배열
const foods =['탕수육','꿔바로우','수육','족발'];
// 컴포넌트 배열로 변환 .map을 이용해 하나씩 랜더링
const foodsList = foods.map((food,index)=>(
<h2 key={index}>{index} : {food}</h2>
))
return(
<div>
<h1>과일목록</h1>
<div>{list}</div>
<h1>요리목록</h1>
<div>{foodsList}</div>
</div>
)
}
export default List;
import {useState} from 'react';
const List = () => {
// 1. 과일
const [fruits, setfruits] = useState([
{id:1, text:'딸기'},
{id:2, text:'바나나'},
{id:3, text:'오렌지'},
{id:4, text:'사과'},
]);
const [nextId, setnextId] = useState(5);
const list=fruits.map((fruit)=><li key={fruit.id}>{fruit.id}-{fruit.text}</li>);
const [fruitname, setfruitname] = useState('복숭아');
const onClickFruit = () => {
if(fruitname==='') {
alert('과일 이름을 입력하세요!');
return;
}
if(!window.confirm(`${fruitname}을(를) 추가하실래요?`)) return;
const newFruits = fruits.concat({
id: nextId,
text: fruitname
});
setfruits(newFruits);
setnextId(nextId + 1);
setfruitname('');
}
const onKeyPressFruit = (e) => {
if(e.key === 'Enter'){
onClickFruit();
}
}
// 요리
const [foods, setfoods] = useState([
{id:1, text:'탕수육'},
{id:2, text:'꿔바로우'},
{id:3, text:'오향장육'},
{id:4, text:'어향가지'},
]);
const [nextid, setnextid] = useState(5);
const foodList=foods.map((food)=><li key={food.id}>{food.id}-{food.text}</li>);
const [foodname, setfoodname] = useState('깐풍기');
const onClickFood = () => {
if(foodname==='') {
alert('요리 이름을 입력하세요!');
return;
}
if(!window.confirm(`${foodname}을(를) 추가하실래요?`)) return;
const newFoods = foods.concat({
id: nextid,
text: foodname
});
setfoods(newFoods);
setnextid(nextid + 1);
setfoodname('');
}
const onKeyPressFood = (e) => {
if(e.key === 'Enter'){
onClickFood();
}
}
return(
<div>
<h1>과일목록</h1>
<input type="text" name="fruitname" value={fruitname}
onChange={(e)=>setfruitname(e.target.value)}
onKeyPress={onKeyPressFruit}/>
<button onClick={onClickFruit}>과일추가</button>
<ul>{list}</ul>
<hr/>
<h1>음식목록</h1>
<input type="text" name="foodname" value={foodname}
onChange={(e)=>setfoodname(e.target.value)}
onKeyPress={onKeyPressFood}/>
<button onClick={onClickFood}>요리추가</button>
<ul>{foodList}</ul>
</div>
);
}
export default List;
'ICIA 수업일지' 카테고리의 다른 글
| 2021.09.13 수업일지(React.js) (0) | 2021.09.13 |
|---|---|
| 2021.09.10 수업일지(React.js) (0) | 2021.09.10 |
| 2021.09.08 수업일지(Spring, Servlet, JSTL) (0) | 2021.09.08 |
| 2021.09.07 수업일지(Servlet, Mysql, jstl) (0) | 2021.09.07 |
| 2021.09.06 수업일지(Mysql, Servlet, JSTL) (0) | 2021.09.06 |
