더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import A_SignUp from "./pages/A_SignUp";
import B_SignUp_Exam from "./pages/B_SignUp_Exam";
import C_object_Signup from "./pages/C_Object_SignUp";
import D_SpreadOperator from "./pages/D_SpreadOperator";
import E_Object_SignUp_Exam from "./pages/E_Object_SignUp_Exam";
import F_Calculator from "./pages/F_Calculator";
import G_Object_Calculator from "./pages/G_Object_Calculator";
import H_ProfileCard from "./pages/H_ProfileCard";
function App() {
// TODO : 변수/함수를 정의하는 부분
// TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임
return (
<div className="App">
{/* TODO: 자식 컴포넌트 추가 */}
{/* <A_SignUp /> */}
{/* <B_SignUp_Exam /> */}
{/* <C_object_Signup /> */}
{/* <D_SpreadOperator /> */}
{/* <E_Object_SignUp_Exam /> */}
{/* <F_Calculator /> */}
{/* <G_Object_Calculator /> */}
{/* <H_ProfileCard /> */}
</div>
);
}
export default App;
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<!-- TODO : 부트스트랩 css 삽입 bootstrap css cdn -->
<link
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
A_SignUp
리액트에서 form 입력 양식 다루기
단방향바인딩(화면 바인딩), 수동바인딩(직접 코딩) 해보기
(정방향)바인딩 : 변수의 값을 변경하면 -> 화면에 변경된 값이 바로 출력
(역방향)바인딩 : 화면의 값을 변경하면 -> 변수의 값을 변경해야됨(※리액트에서는 해주지 않음)
(바닐라 js 기준)
1) 변수의 값을 가져와서 : querySelector()
2) 변수의 값을 수정해서 :
3) innerHTML 화면에 넣기
더보기
// TODO : 자식 컴포넌트 연습 A_SignUp.js
// TODO: 리액트에서 form 입력 양식 다루기
// TODO : 단방향바인딩(화면 바인딩), 수동바인딩(직접 코딩)
// TODO : (정방향)바인딩 : 변수의 값을 변경하면 -> 화면에 변경된 값이 바로 출력
// TODO: (역방향)바인딩 : 화면의 값을 변경하면 -> 변수의 값을 변경해야됨(※리액트에서는 해주지 않음)
// TODO : (바닐라 js) 1) 변수의 값을 가져와서 : querySelector()
// TODO : 2) 변수의 값을 수정해서 :
// TODO : 3) innerHTML 화면에 넣기
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useState } from "react";
function A_SignUp() {
// TODO : 변수 정의
let [name, setName] = useState(""); // 이름 입력상자(input)와 바인딩(연결)
let [gender, setGender] = useState("남자"); // 성별(select) 와 바인딩(연결)
// TODO : 함수 정의
// nfn
// 버튼 클릭 함수 : alert() 이름, 성별을 출력하기
const handleSubmit = (event) => {
// submit 버튼 : 기본특징(페이지 이동) : 취소
event.preventDeFault(); // 기본 기능 취소(방해) 함수
alert("이름 : " + name + "성별 : " + gender);
};
// TODO: 역방향 바인딩 (수동 코딩)
// TODO : 화면 값 변경(event.target.value) -> 변수 값 변경
// nfn
const handleChangeName = (event) => {
// 수정함수 : setter 함수
setName(event.target.value); //TODO: 역방향 바인딩 코딩(input)
};
// nfn
const handleChangeGender = (event) => {
setGender(event.target.value); //TODO: 역방향 바인딩(select)
};
return (
<div className="container">
<form>
<label>
이름:
{/* 데이터 바인딩 : value={name}
name = "aaa" -> 화면 "aaa"
*/}
<input
type="text"
value={name}
name="name"
onChange={handleChangeName}
/>
</label>
<br />
<label>
성별:
{/* value : 먼저 선택된값 */}
<select value={gender} name="gender" onChange={handleChangeGender}>
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
</label>
{/* 제출(submit) 버튼 */}
{/* 기본 특징 : 페이지 이동 */}
<button type="submit" onClick={handleSubmit}>
{" "}
{/* submit 버튼 : 기본특징(페이지 이동) */} 제출
</button>
</form>
</div>
);
}
export default A_SignUp;
B_SignUp_Exam
입력 양식 출력(버튼) 내보내기
OnChange 이벤트
입력양식 부트스트랩 디자인 추가
변수 초기값은 " "
name, password, email, phone, address 변수 정의(정방향 바인딩)
onChange 함수들을 정의(역방향 바인딩)
더보기
// TODO : 자식 컴포넌트 연습 B_SignUp_Exam.js
import React, { useState } from "react";
// TODO : 연습문제 ) 변수/ 함수에 맞추어 코딩하기
// 변수 초기값은 모두 "" 하세요
// 추가) 입력양식 부트스트랩 디자인도 추가해 보세요
// name, password, email, phone, address 변수 정의(정방향 바인딩)
// onChange 함수들을 정의하세요(역방향 바인딩)
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
function B_SignUp_Exam() {
// TODO: 변수 정의 : 정방향 바인딩
let [name, setName] = useState(""); // input value={name}
let [password, setPassword] = useState(""); // input value={password}
let [email, setEmail] = useState(""); // input value={email}
let [phone, setPhone] = useState(""); // input value={phone}
let [address, setAddress] = useState(""); // input value={address}
// TODO: 함수 정의 : 역방향 바인딩(OnChange 이벤트)
// TODO: 화면 값(event.target.value)
// TODO: -> 변수 값으로 변경(setter 함수: setName(변경값))
// nfn : 화살표함수 단축키
const handleChangeName = (event) => {
// 화면값 -> 변수값 변경
setName(event.target.value); // 역방향 바인딩 코딩
};
// nfn
const handleChangePassword = (event) => {
// 화면값 -> 변수값 변경
setPassword(event.target.value); // 역방향 바인딩 코딩
};
// nfn
const handleChangeEmail = (event) => {
// 화면값 -> 변수값 변경
setEmail(event.target.value); // 역방향 바인딩 코딩
};
// nfn
const handleChangePhone = (event) => {
// 화면값 -> 변수값 변경
setPhone(event.target.value); // 역방향 바인딩 코딩
};
// nfn
const handleChangeAddress = (event) => {
// 화면값 -> 변수값 변경
setAddress(event.target.value); // 역방향 바인딩 코딩
};
// 클릭이벤트 함수
// nfn
const handleSubmit = (event) => {
event.preventDefault(); // 기본 기능 막기 함수
alert(`이름 : ${name} 패스워드 : ${password}
이메일 : ${email} 폰: ${phone} 주소 : ${address}
`);
};
return (
// TODO: 여기
<div>
<form>
<label>
이름:
<input
className="form-control"
type="text"
value={name}
name="name"
onChange={handleChangeName}
/>
</label>
<br />
<label>
패스워드:
<input
className="form-control"
type="password"
value={password}
name="password"
onChange={handleChangePassword}
/>
</label>
<br />
<label>
email:
<input
className="form-control"
type="email"
value={email}
name="email"
onChange={handleChangeEmail}
/>
</label>
<br />
<label>
phone:
<input
className="form-control"
type="text"
value={phone}
name="phone"
onChange={handleChangePhone}
/>
</label>
<br />
<label>
주소:
<input
className="form-control"
type="text"
value={address}
name="address"
onChange={handleChangeAddress}
/>
</label>
<button
className="btn btn-primary"
type="submit"
onClick={handleSubmit}
>
제출
</button>
</form>
</div>
);
}
export default B_SignUp_Exam;
C_Object_SignUp
클릭 이벤트 함수 사용하여 객체의 속성의 값을 수정해서 내보내기
기본 기능 중지 함수 사용됨
더보기
// TODO : 자식 컴포넌트 연습 C_Object_SignUp.js
// TODO : 바인딩&역바인딩 함수 사용
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useState } from "react";
function C_Object_SignUp() {
// TODO: 변수 정의
// 객체 정의
let initialCustomer = {
name: "",
gender: "남자",
};
// 정방향 바인딩 변수
let [customer, setCustomer] = useState(initialCustomer);
// TODO: 함수 정의
// 역방향 바인딩 함수 코딩
// nfn : 화살표 함수 단축키
const handleChange = (event) => {
// 화면의 변경값 = event.target.value
// 화면에 변경하고 있는 태그 = event.target.name
// 예) input 변경하고 있음 = input.name = name
// select 변경하고 있음 = select.name = gender
// name === customer.name 속성명 같음
// gender === customer.gender 속성명 같음
// TODO : 변경 값을 바꾸기 위해 임시 변수를 지정
let attrValue = event.target.value; // 화면 변경값
let attrName = event.target.name; // 화면 태그이름(gender)
// customer 객체의 속성의 값을 수정
// TODO: 모던js === 이크마js === ES6 js 스프레드 연산자(...연산자)
// 예시 setCustomer({...customer, [name] : "홍길동"}) --> name("" 빈문자 값) 홍길동으로 수정 가능
// 예시 setCustomer({...customer, [gender] : "여자"}) --> gender(남자) 여자로 수정 가능
// [ ]변수를 넣기위해 대괄호 관례
setCustomer({ ...customer, [attrName]: attrValue });
};
// 클릭 이벤트 함수
// nfn
const handleSubmit = (event) => {
event.preventDefault(); // 기본 기능 중지 함수
alert(`이름 : ${customer.name} 성별 : ${customer.gender}`);
};
// TODO: HTML 태그
return (
<div className="container">
<form>
<label>
이름:
{/* 데이터 바인딩 : value={name}
name = "aaa" -> 화면 "aaa"
*/}
<input
type="text"
value={customer.name}
name="name"
onChange={handleChange}
/>
</label>
<br />
<label>
성별:
{/* value : 먼저 선택된값 */}
<select value={customer.gender} name="gender" onChange={handleChange}>
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
</label>
{/* 제출(submit) 버튼 */}
{/* 기본 특징 : 페이지 이동 */}
<button type="submit" onClick={handleSubmit}>
제출
</button>
</form>
</div>
);
}
export default C_Object_SignUp;
D_SpreadOperator
스프레드를 이용한 연산자 사용하기
더보기
// TODO : 자식 컴포넌트 연습 D_SpreadOperator.js
// TODO :스프레드를 이용한 연산자 다시 연습
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useEffect } from "react";
function D_SpreadOperator() {
// 화면이 뜰때 자동 실행되는 이벤트 함수 : 생명주기(생성)
useEffect(() => {
// ... 연산자 연습
let num = {
name: "홍길동",
email: "hong@daum.net",
};
console.log({ name: "장길산" });
// TODO : num 객체의 name 값 수정
console.log({ ...num, name: "장길산" }); // { name: "장길산", email:"hong@daum.net"}
// TODO : 연습문제
// 원본 객체의 속성은 모두 유지한채 name: "임꺽정" 으로 바꾸세요
// 결과 : {name:"임꺽정", email:""}
let num2 = { name: "", email: "" };
console.log({ ...num2, name: "임꺽정" }); // { name: "임꺽정", email:""}
// TODO : 예제 2
let num3 = {
name: "홍길동",
email: "hong@daum.net",
};
let attrValue = "hong@naver.com";
// 하드코딩 지양하고 소프트코딩을 해야함(변수를 다루기)
// 하드코딩 X -> console.log({ ...num3, email: "hong@naver.com" });
console.log({ ...num3, email: attrValue }); // 소프트코딩 O
// TODO : 예제 3
let num4 = {
name: "홍길동",
email: "hong@daum.net",
};
let attrValue2 = "hong@naver.com"; // 속성값
let attrName2 = "email"; // 속성명
// TODO:자바스크립트 규칙) 속성명에 변수를 사용할떄는 : [변수명]
// TODO:자바스크립트 규칙) 속성값에 변수를 사용할떄는 : 변수명
console.log({ ...num4, [attrName2]: attrValue2 });
// TODO : 연습문제 2
// attrName3 에는 속성명 "phone" 을 넣고,
// attrValue3 에는 속성값 "010-5678-5678" 들어있습니다.
// 변수 2개를 활용해서 객체속성을 수정해 보세요
let num5 = {
age: 15,
phone: "010-1234-5678",
};
let attrName3 = "phone";
let attrValue3 = "051-123-4567";
let attrName4 = "tel";
console.log({ ...num5, [attrName3]: attrValue3, [attrName4]: attrValue3 });
}, []);
return <div>D_SpreadOperator</div>;
}
export default D_SpreadOperator;
E_Object_SignUp_Exam
스프레드 연산자 이용 객체 속성 복사 및 수정
useState() 1번만 사용하고 객체 변수 만들고, handleChange 함수만 코딩하기
더보기
/ TODO : 자식 컴포넌트 연습 E_Object_SignUp_Exam.js
// TODO: 스프레드 연산자 이용 객체 속성 복사 및 수정
// TODO : 연습문제
// 객체를 사용하는 형태로 코딩하세요
// useState() 1번만 사용하고 객체 변수 만들고, handleChange 함수만 코딩하기
// (힌트)스프레드 연산자 이용 객체 속성 복사 및 수정
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useState } from "react";
function E_Object_SignUp_Exam() {
// TODO: 객체 정의
let initialCustomer = {
name: "",
password: "",
email: "",
phone: "",
address: "",
};
// TODO: 변수 정의
// 바인딩 변수 : 사용법 : let [변수명, set변수명] = useState(초기값);
// 정방향 바인딩 : 변수값 변경 -> 화면 값 변경(자동)
let [customer, setCustomer] = useState(initialCustomer);
// TODO: 함수 정의
// nfn : 화살표함수 단축키
// 역방향 바인딩 코딩 : ... 연산자 이용 객체 속성 복사 및 수정
const handleChange = (event) => {
// 화면 화면의 값 : event.target.value
let attrValue = event.target.value;
// 현재 화면의 태그이름 : event.target.name(name ~ phone)
let attrName = event.target.name;
// 객체의 속성의 값 수정
setCustomer({ ...customer, [attrName]: attrValue });
};
// TODO: 클릭 이벤트 함수 : 제출버튼
// nfn
const handleSubmit = (event) => {
event.preventDefault(); // 기본 기능 막기 함수
alert(` 이름 : ${customer.name} 패스워드: ${customer.password}
이메일 : ${customer.email} 폰: ${customer.phone}
주소: ${customer.address}`);
};
return (
// TODO: 여기
<div className="container">
<form>
{/* 이름 시작 */}
<label>
이름:
<input
className="form-control"
type="text"
value={customer.name}
name="name"
onChange={handleChange}
/>
</label>
{/* 이름 끝 */}
<br />
{/* 패스워드 시작 */}
<label>
패스워드:
<input
className="form-control"
type="password"
value={customer.password}
name="password"
onChange={handleChange}
/>
</label>
{/* 패스워드 끝 */}
<br />
{/* 이메일 시작 */}
<label>
email:
<input
className="form-control"
type="email"
value={customer.email}
name="email"
onChange={handleChange}
/>
</label>
{/* 이메일 끝 */}
<br />
{/* phone 시작 */}
<label>
phone:
<input
className="form-control"
type="text"
value={customer.phone}
name="phone"
onChange={handleChange}
/>
</label>
{/* phone 끝 */}
<br />
{/* 주소 시작 */}
<label>
주소:
<input
className="form-control"
type="text"
value={customer.address}
name="address"
onChange={handleChange}
/>
</label>
{/* 주소 끝 */}
{/* 제출 버튼 시작 */}
<button
className="btn btn-primary"
type="submit"
onClick={handleSubmit}
>
제출
</button>
{/* 제출 버튼 끝 */}
</form>
</div>
);
}
export default E_Object_SignUp_Exam;
F_Calculator
변수를 정의하고, input 태그에 데이터 바인딩과 handleChange() 함수를 정의하기
더보기
// TODO : 자식 컴포넌트 연습 F_Calculator.js
// TODO : 연습문제
// 변수를 정의하고, input 태그에 데이터 바인딩과
// handleChange() 함수를 정의하세요.
// 공식은 아래 제시된 것을 사용하세요.
// /* (섭씨온도 * 1.8) + 32 = 화씨온도 */
// /* (화씨온도 - 32) / 1.8 = 섭씨온도 */
// 결과: <p>화씨온도 : {화씨온도} </p>
// <p>섭씨온도 : {섭씨온도} </p>
// TODO: (힌트) 스프레드 (x) 객체 (x) : 일반 숫자변수 사용
// TODO: (A_SignUp.js 참고)
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useState } from "react";
function F_Calculator() {
// TODO: 변수 정의
// TODO: 힌트
// 바인딩 변수 : cTemp fTemp
// 사용법 : let [] = useState(초기값)
let [cTemp, setCtemp] = useState(0);
let [fTemp, setFtemp] = useState(0);
// TODO: 함수 정의
// TODO: 힌트
// 역방향 바인딩 함수 : handleChangeCtemp, handleChangeFtemp
// nfn : 화살표함수 단축키
const handleChangeCtemp = (event) => {
// 현재 화면값(event,taget,value) -> 변수 값으로 변경
setCtemp(event.target.value);
};
const handleChangeFtemp = (event) => {
// 현재 화면값(event,taget,value) -> 변수 값으로 변경
setFtemp(event.target.value);
};
return (
<div>
<fieldset>
{/* (섭씨온도 * 1.8) + 32 = 화씨온도 */}
<legend>섭씨온도를 입력해주세요:</legend>
<input value={cTemp} onChange={handleChangeCtemp} />
<p>화씨온도 : {cTemp * 1.8 + 32} </p>
</fieldset>
<fieldset>
{/* (화씨온도 - 32) / 1.8 = 섭씨온도 */}
<legend>화씨온도를 입력해주세요:</legend>
<input value={fTemp} onChange={handleChangeFtemp} />
<p>섭씨온도 : {(fTemp - 32) / 1.8} </p>
</fieldset>
</div>
);
}
export default F_Calculator;
H_ProfileCard
리액트에서 스타일 속성 사용하기
변수이름 title("Inge lee") === true 이면 && 뒤에 태그가 화면에 보임
코딩의 관례적 사용 : 변수에 어떤 값이 있으면 무조건 true
false ==> null, [], {}, false의 0
더보기
// TODO : 자식 컴포넌트 연습 H_ProfileCard.js
// TODO : 리액트에서 스타일 속성 사용하기
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React, { useState } from "react";
function H_ProfileCard() {
// TODO: 변수 정의
let [title, setTitle] = useState("Inge lee");
// TODO: 함수 정의
// nfn : 화살표함수 단축키
// TODO: HTML 태그
return (
<div
style={{
margin: 8,
padding: 8,
borderRadius: 8,
backgroundColor: "#4ea04e",
}}
>
{/* 변수이름 title("Inge lee") === true 이면 && 뒤에 태그가 화면에 보임 */}
{/* 코딩의 관례적 사용 : 변수에 어떤 값이 있으면 무조건 true */}
{/* false ==> null, [], {}, false의 0 */}
{title && <h1>{title}</h1>}
<p>안녕하세요, 소플입니다.</p>
<p>저는 리액트를 사용해서 개발하고 있습니다.</p>
</div>
);
}
export default H_ProfileCard;
'Visual Studio Code' 카테고리의 다른 글
| [React] chapter_08 (0) | 2023.09.01 |
|---|---|
| [React] chapter_07 (0) | 2023.09.01 |
| [React] chapter_05 (0) | 2023.08.31 |
| [React] chapter_04 (0) | 2023.08.30 |
| [React] chapter_03 (0) | 2023.08.30 |