React/실습

· React/실습
ul-li 태그 반복하여 출력하기 function H_Book() { const students = [ { id: 1, name: "Inje", }, { id: 2, name: "Steve", }, { id: 3, name: "Bill", }, { id: 4, name: "Jeff", }, ]; // 변수정의 const [student, setStudent] = useState(students); return ( {/* 반복문 : 여기서 돌리면 됨 */} {student.map((value, index) => { return ( {value.name} ); })} ); } export default H_Book;
· React/실습
아래 변수에 값이 있다. isFull 이 true 이면 정원이 가득찼습니다. 아니면 입장할 수 있습니다. 를 출력하세요. import React from "react"; import { useState } from "react"; function E_ComfirmButton_Exam() { let [isFull, setIsFull] = useState(false); const display = () => { setIsFull(true); }; return ( {(isFull === true) ? ( 정원이 가득찼습니다. ) : ( 입장할 수 있습니다. )} ); } export default E_ComfirmButton_Exam; 아래 변수 count 에 9 의 값이 있다. 10을 초과하면 ( count..
· React/실습
// TODO : 연습문제 ) 아래 소스를 완성하세요 // 버튼을 클릭하면 isTable 변수의 값을 true 로 바꾸고, // 아래 내용을 담고 있는 테이블 태그로 // 화면에 보이게 만드세요. // (부트스트랩 테이블 디자인을 활용하세요.) // 테이블 내용 : // No Dname Loc // 1 Sales 부산 // 2 Development 서울 #1 테이블 보이게/안보이게 하기 위한 isTable의 변수 값을 지정 let [isTable, setIsTable] = useState(false) #2 태그부분에 논리연산자를 입력하여 true 값이면 보이게하기 return ( 테이블 보이기 {isTable && // isTable 이 true 이면 아래 태그 출력 No Dname Loc 1 Sales..
· React/실습
// TODO : 연습문제 아래 데이터를 반복문으로 출력하세요 // 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", img: "http://t1.da..
· React/실습
// TODO : image 는 img 태그의 src 에 넣고, link 주소는 a href 속성에 넣어서 출력하시요 // TODO : isUpdate 가 true 이면 화면에 "true" 라고 출력하고, false 이면 "false"라고 출력하세요. import React, { useState } from 'react' import "../assets/styles.css"; function C_Comment_Exam2() { // TODO : useState 이용 4가지 변수 넣기, Comment_Exam2.css import // name="제목" // link="http://www.naver.com" // img="https://upload.wikimedia.org/wikipedia/commons/..
· React/실습
// TODO : 이미지와 함께 화면에 출력하세요 // TODO : 변수 (title="제목" publisher="출판사" // TODO : author="작자" stock="재고") 를 만들어서 화면에 출력하세요(useState()) 풀이 App.js 부분(부모 컴포넌트) import A_Comment from "./pages/A_Comment"; import B_Comment_Exam from "./pages/B_Comment_Exam"; function App() { return ( {/* 자식 컴포넌트 추가 */} {/* */} ); } export default App; B_Comment_Exam.js 부분 (자식 컴포넌트) // B_Comment_Exam.js : 자식(연습문제) // rfce..