빈 이미지와 함께 화면에 출력해보기
import css파일 가져오기
set변수 : setter 함수 (변수 값 저장 용도 함수) 사용해 보기
화면 바인딩 용도 : useState() 함수 (훅(hook) 함수 : useXXX()) 사용해 보기
더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import A_Comment from "./pages/A_Comment";
function App() {
return (
<div className="App">
<A_Comment />
</div>
);
}
export default App;
더보기
// TODO : 자식 컴포넌트 A_Comment.js
// TODO : 빈 이미지와 함께 화면에 출력해보기
// TODO : 리액트 기본 컴포넌트 템플릿 단축키 : rfce
// TODO : import 함수 제대로 에러 확인 필수
import React from "react";
import "../assets/Comment.css";
import "../assets/styles.css";
import { useState } from "react";
function A_Comment() {
// TODO: 변수/함수 정의 : 여기
// 사용법 : let [변수, set변수] = useState(초기값);
// set변수 : setter 함수 (변수 값 저장 용도 함수)
// 화면 바인딩 용도 : useState() 함수 (훅(hook) 함수 : useXXX())
let [name, setName] = useState("홍길동");
let [comment, setComment] = useState("메모");
return (
<div className="wrapper">
<div className="imageContainer">
<img
className="image"
/>
</div>
<div className="contentContainer">
<span className="nameText">{name} </span>
<span className="commentText">{comment} </span>
</div>
</div>
);
}
export default A_Comment;
useState 이용 4가지 변수 넣기, Comment_Exam2.css import
더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import C_Comment_Exam2 from "./pages/C_Comment_Exam2";
function App() {
return (
<div className="App">
<C_Comment_Exam2 />
</div>
);
}
export default App;
더보기
.App {
text-align: center;
font-size: 50px;
}
더보기
// C_Comment_Exam2.js : 자식(연습)
// rfce
import React, { useState } from 'react'
import "../assets/styles.css";
// TODO : useState 이용 4가지 변수 넣기, Comment_Exam2.css import
// name="제목"
// link="http://www.naver.com"
// isUpdate=true
function C_Comment_Exam2() {
// 힌트 : 변수/함수 정의
let [img, setImg]
let [name, setName] = useState("제목");
let [isUpdate, setIsUpdate] = useState(true);
return (
<div className="wrapper">
{
// TODO : image 는 img 태그의 src 에 넣고, link 주소는 a href 속성에 넣어서 출력하시요
// TODO : isUpdate 가 true 이면 화면에 "true" 라고 출력하고, false 이면 "false"라고 출력하세요.
}
<div className="contentContainer">
<span className="commentText">
<img src={img} />{" "}
</span>
<br/>
<span className="nameText">{name} </span>
<span className="commentText">
<a href={link}>{link} </a>
</span>
<span className="commentText">{isUpdate? "true":"false"} </span>
</div>
</div>
)
}
export default C_Comment_Exam2
리액트의 반복문 : map() 함수 사용
용도 : for문 대신 사용하는 구문
사용법 : 배열변수.map(함수());
특징 : 배열변수의 크기(길이, 건수)만큼 자동으로 반복함 (함수())
더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import D_CommentList from "./pages/D_CommentList";
function App() {
return (
<div className="App">
<D_CommentList />
</div>
);
}
export default App;
더보기
.App {
text-align: center;
font-size: 50px;
}
더보기
// D_CommentList.js : 자식
// TODO: 리액트의 반복문 : map() 함수 사용
// rfce
import React, { useState } from "react";
import "../assets/styles.css";
function D_CommentList() {
// 객체배열 : [{},{} ...] === JSON 문서 데이터 형태(인터넷 통신 거의 표준)
// 프론트 <-(JSON 데이터)-> 벡엔트(DB 넣기)
const initialComments = [
{
name: "이인제 : ",
comment: "안녕하세요, 소플입니다.",
},
{
name: "유재석 : ",
comment: "리액트, 재미있어요!!.",
},
{
name: "강민경 : ",
comment: "저도 리액트 배워보고 싶어요!!",
},
];
// TODO: 변수/함수 정의
// useState() 함수 이용 변수 정의
// 사용법 : let [변수명, set변수명] = useState(초기값)
let [comments, setComments] = useState(initialComments);
// HTML 태그 작성 부분 : return 부분
// 사용법 : 배열변수.map((value, index(생략), array(생략))=>{반복문;});
// value :배열의 값, index : 배열의 번호, array : 배열
// TODO: map() 함수 : 배열변수.map(함수());
// TODO: 용도 : for문 대신 사용하는 구문
// TODO: 특징 : 배열변수의 크기(길이, 건수)만큼 자동으로 반복함 (함수())
return (
<div>
{comments.map((comment, index) => {
// 반복문 : JSX 표현식(js + html 섞어 쓸수 있음)
return (
// TODO: 여기 : 반복 ?
<div className="wrapper" key={index}>
<div className="imageContainer">
<img
className="image"
/>
</div>
<div className="contentContainer">
<span className="nameText">{comment.name}</span>
<span className="commentText">{comment.comment}</span>
</div>
</div>
);
})}
</div>
);
export default D_CommentList;
리액트의 반복문 : 배열변수.map() 함수 사용
사용법 : 배열변수.map(()=>{return(태그)}
comment : 배열의 값, index : 배열의 인덱스번호
특징 : 배열변수의 크기(길이, 건수)만큼 자동으로 반복함 (함수())
더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import E_CommentList_Exam from "./pages/E_CommentList_Exam";
function App() {
return (
<div className="App">
<E_CommentList_Exam />
</div>
);
}
export default App;
더보기
.App {
text-align: center;
font-size: 50px;
}
더보기
// CommentList_Exam.js
// TODO : 아래 데이터가 주어졌을때 화면에 출력하세요
import React, { useState } from "react";
import "../assets/styles.css";
function E_CommentList_Exam() {
// TODO : 아래 데이터가 주어졌을때 화면에 출력하세요
const initialComments = [
{
id: 1,
title: "어떻게 배울 것인가",
publisher: "비즈니스북스",
author: "존 맥스웰",
stock: 2,
},
<br />,
{
id: 2,
title: "신경끄기의 기술",
publisher: "갤리온",
author: "마크 맨슨",
stock: 0,
},
<br />,
{
id: 3,
title: "부의 미래",
publisher: "청림출판",
author: "앨빈 토플러",
stock: 5,
},
<br />,
{
id: 4,
title: "기획자의 습관",
publisher: "홍익출판사",
author: "최장순",
stock: 4,
},
];
// 변수/함수 정의
// 사용법 : let [] = useState() : 바인딩 변수(객체배열 === 배열)
let [comments, setComments] = useState(initialComments);
// -------------------------
// html 태그
//
return (
<div>
{/* TODO :배열변수.map() 사용해서 반복문을
작성하세요 */}
{/* map 사용법 : 배열변수.map(()=>{return(태그)}) */}
{/* comment : 배열의 값, index : 배열의 인덱스번호 */}
{comments.map((comment, index) => {
// TODO: 반복 : 4번 , 자동반복
return (
// html 태그(반복)
<div>
<div>
<span>{comment.title}</span>
<span>{comment.publisher}</span>
<span>{comment.author}</span>
<span>{comment.stock}</span>
</div>
</div>
);
})}
</div>
);
}
export default E_CommentList_Exam;
리액트의 반복문 : 배열변수.map() 함수 사용 예시 2
html 아래 내용 반복문 수행
더보기
// TODO : 부모 컴포넌트 메인 : App.js
// TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트)
// TODO : 웹브라우저 확인(주소창) : http://localhost:3000
// TODO : App.css import (기본 : 중앙정렬)
import "./App.css";
// TODO : 자식 컴포넌트 가져오기(import)
import F_CommentList_Exam2 from "./pages/F_CommentList_Exam2";
function App() {
return (
<div className="App">
<F_CommentList_Exam2 />
</div>
);
}
export default App;
더보기
.App {
text-align: center;
font-size: 50px;
}
더보기
// CommentList_Exam2.js
// TODO : 연습문제 아래 데이터를 반복문으로
import React,{useState} from "react";
import "../assets/styles.css";
function F_CommentList_Exam2() {
// TODO : 연습문제 아래 데이터를 반복문으로
// 출력하세요
const initialWebtoons = [
{
name: "햄스터와 그녀",
link: "https://webtoon.kakao.com/content/%ED%96%84%EC%8A%A4%ED%84%B0%EC%99%80-%EA%B7%B8%EB%85%80/1625",
isUpdate: true,
},
{
name: "프롬 스타",
isUpdate: true,
},
{
name: "위대한 로맨스",
link: "https://webtoon.kakao.com/content/%EC%9C%84%EB%8C%80%ED%95%9C-%EB%A1%9C%EB%A7%A8%EC%8A%A4/1564",
isUpdate: false,
},
{
name: "빛나는 손을",
isUpdate: false,
},
];
// TODO: 변수 정의(useState())
let [webtoons, setWebtoons] = useState(initialWebtoons);
// 변수/함수 부분
// -----------------------------------
// html 부분
return (
<div>
{/* html 아래 내용 반복문 수행 */}
{/* 반복문 : 배열변수.map(()=>{return(태그)}) */}
{webtoons.map((webtoon, index) => {
return (
// html 태그 추가(반복)
<div className="wrapper" key={index}>
<div className="contentContainer">
<span className="commentText">
<img src={webtoon.img} />{" "}
</span>
<br/>
<span className="nameText">{webtoon.name}</span>
<span className="commentText">
<a href={webtoon.link}>{webtoon.link}</a>
</span>
<span className="commentText">
{webtoon.isUpdate? "true": "false"}
</span>
</div>
</div>
);
})}
</div>
);
}
export default F_CommentList_Exam2;
'Visual Studio Code' 카테고리의 다른 글
[React] chapter_06 (0) | 2023.08.31 |
---|---|
[React] chapter_05 (0) | 2023.08.31 |
[React] chapter_03 (0) | 2023.08.30 |
[React] 04_chapter 02 (0) | 2023.08.29 |
[React] chapter_01 (0) | 2023.08.29 |