반응형

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 (
    <div>
      <ul class="list-group">
        {/* 반복문 : 여기서 돌리면 됨 */}
        {student.map((value, index) => {
          return (
          <li class="list-group-item">{value.name}</li>
          );
        })}
      </ul>
    </div>
  );
}

export default H_Book;

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

삼항연산자를 이용한 실습  (0) 2023.08.31
조건문을 활용한 예제  (0) 2023.08.31
반복문을 활용한 예제  (0) 2023.08.31
useState 이용 4가지 변수 넣기  (0) 2023.08.31
useState 함수를 이용한 Comment 출력  (0) 2023.08.31
반응형

아래 변수에 값이 있다. isFull 이 true 이면 <p style={{ color: "red" }}>정원이 가득찼습니다.</p> 아니면 <p style={{ color: "blue" }}>입장할 수 있습니다.</p> 를 출력하세요.
import React from "react";
import { useState } from "react";

function E_ComfirmButton_Exam() {

  let [isFull, setIsFull] = useState(false);

  const display = () => {
    setIsFull(true);
  };

  return (
    <div>
      <button onClick={display} className="btn btn-warning">
        {(isFull === true) ? (
          <p style={{ color: "red" }}>정원이 가득찼습니다.</p>
        ) : (
          <p style={{ color: "blue" }}>입장할 수 있습니다.</p>
        )}
      </button>
    </div>
  );
}

export default E_ComfirmButton_Exam;

아래 변수 count 에 9 의 값이 있다.  10을 초과하면 ( count>10 ) <p style={{ color: "red" }}>정원이 가득찼습니다.</p>아니면 <p style={{ color: "blue" }}>입장할 수 있습니다.</p> 를 출력하세요.
function F_ConfirmButton_Exam2() {
    let [count, setCount] = useState(9);  // 변수선언
    const addCount = () => {  // 클릭이벤트 함수 => 클릭시  카운트 증가
        let val = count + 1;
        setCount(val);
     }

  return (
    <div>
        현재 정원 : {count}
        <br/>
        <button onClick={addCount}  disabled={((count > 10) === true) ? true : false}> 카운트 수가 10 초과하면 버튼 비활성화
           {
            (count > 10) === true ? <p style={{ color: "red" }}>정원이 가득찼습니다.</p> : <p style={{ color: "blue" }}>입장할 수 있습니다.</p>
           }
        </button>
    </div>
  )
}

 

 

onClickLogout 함수는 클릭하면 isLoggedIn 변수의 값을 true -> false 로 변경한다.
onClickLogIn 함수는 클릭하면 isLoggedIn 변수의 값을 false -> true로 변경한다.
코딩을 완성해보세요.
function G_LandingPage() {
    // TODO: 변수 정의
    const [isLoggedIn, setIsLoggedIn] = useState(false);   // 초기값 false
    // TODO: 함수 정의
    // nfn
    const onClickLogin = () => {
        // TODO: 아래 코딩하세요
        setIsLoggedIn(true);
       
     }
         // nfn
    const onClickLogout = () => {
        // TODO: 아래 코딩하세요
        setIsLoggedIn(false);
     }

  return (
    <div>
        {
            (isLoggedIn===true)? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )
        }
    </div>
  )
}

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2)  (0) 2023.08.31
조건문을 활용한 예제  (0) 2023.08.31
반복문을 활용한 예제  (0) 2023.08.31
useState 이용 4가지 변수 넣기  (0) 2023.08.31
useState 함수를 이용한 Comment 출력  (0) 2023.08.31
반응형

// TODO : 연습문제 ) 아래 소스를 완성하세요
//   버튼을 클릭하면 isTable 변수의 값을 true 로 바꾸고,
//   아래 내용을 담고 있는 테이블 태그로
//   화면에 보이게 만드세요.
//   (부트스트랩 테이블 디자인을 활용하세요.)
//    테이블 내용 :
//               No   Dname       Loc
//               1    Sales       부산
//               2    Development 서울

#1 테이블 보이게/안보이게 하기 위한 isTable의 변수 값을 지정

let [isTable, setIsTable] = useState(false)

#2 태그부분에 논리연산자를 입력하여 true 값이면 보이게하기

 return (
    <div>
      <button onClick={displayTable} className="btn btn-warning">
        테이블 보이기
      </button>
      <br />
      {isTable &&    // isTable 이 true 이면 아래 태그 출력
        <table class="table">
        <thead>
          <tr>
            <th scope="col">No</th>
            <th scope="col">Dname</th>
            <th scope="col">Loc</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Sales</td>
            <td>부산</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Development</td>
            <td>서울</td>
          </tr>
        </tbody>
      </table>}
    </div>
  );

#3 버튼클릭시 테이블 보이게/안보이게 하는 함수 지정

 

 <button onClick={displayTable} className="btn btn-warning">

 

const displayTable = () => {
        if(isTable === true){
            setIsTable(false);
        } else {
            setIsTable(true);
        }
     }

반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2)  (0) 2023.08.31
삼항연산자를 이용한 실습  (0) 2023.08.31
반복문을 활용한 예제  (0) 2023.08.31
useState 이용 4가지 변수 넣기  (0) 2023.08.31
useState 함수를 이용한 Comment 출력  (0) 2023.08.31
반응형

 // TODO : 연습문제 아래 데이터를 반복문으로 출력하세요
// CommentList_Exam2.js
// TODO : 연습문제 아래 데이터를 반복문으로

import React, { useState } from "react";
import "../assets/styles.css";

function F_CommentList_Exam2() {
  // TODO : 연습문제 아래 데이터를 반복문으로
  //        출력하세요
  const initialWebtoons = [
    {
      name: "햄스터와 그녀",
      isUpdate: true,
    },
    {
      name: "프롬 스타",
      isUpdate: true,
    },
    {
      name: "위대한 로맨스",
      isUpdate: false,
    },
    {
      name: "빛나는 손을",
      isUpdate: false,
    },
  ];

  //   변수 정의(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;
반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2)  (0) 2023.08.31
삼항연산자를 이용한 실습  (0) 2023.08.31
조건문을 활용한 예제  (0) 2023.08.31
useState 이용 4가지 변수 넣기  (0) 2023.08.31
useState 함수를 이용한 Comment 출력  (0) 2023.08.31
반응형

      // 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"
    //         isUpdate=true

  let [name, setName] = useState("제목");
  let [link, setLink] = useState("http://www.naver.com");
  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
반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2)  (0) 2023.08.31
삼항연산자를 이용한 실습  (0) 2023.08.31
조건문을 활용한 예제  (0) 2023.08.31
반복문을 활용한 예제  (0) 2023.08.31
useState 함수를 이용한 Comment 출력  (0) 2023.08.31
반응형

// 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 (
    <div className="App">
      {/* 자식 컴포넌트 추가 */}
      {/* <A_Comment/> */}
      <B_Comment_Exam />
    </div>
  );
}

export default App;

B_Comment_Exam.js 부분 (자식 컴포넌트)

 

// B_Comment_Exam.js : 자식(연습문제)
// rfce
import React from 'react'
import "../assets/styles.css"
import { useState } from 'react';

// TODO : 이미지와 함께 화면에 출력하세요
// TODO : 변수 (title="제목" publisher="출판사"
// TODO :        author="작자" stock="재고") 를 만들어서 화면에 출력하세요(useState())
function B_Comment_Exam() {
    // 변수와 함수 정의
    // let [변수명, set변수명] = useState("초기값");
    let [title, setTitle] = useState("제목");
    let [publisher, setPublisher] = useState("출판사");
    let [author, setAuthor] = useState("작자");
    let [stock, setStock] = useState("재고");
    return (
    <div className="wrapper">
      {/* 빈공간 */}
      <div className="imageContainer">
        <img
          className="image"
        />
      </div>

      {
        //TODO : 컴포넌트를 작성하세요
        //TODO : title = "제목", publisher="작성자",  author="저자", stock="재고"
      }
      <div className="contentContainer">
        <span className="nameText">{title} </span>
        <span className="commentText">{publisher} </span>
        <span className="commentText">{author} </span>
        <span className="commentText">{stock} </span>
      </div>
    </div>
  )
}

export default B_Comment_Exam

styles.css

 

.App {
    text-align: center;
    font-size: 50px;
  }
 
반응형
저작자표시 비영리 변경금지 (새창열림)

'React > 실습' 카테고리의 다른 글

반복문을 활용한 예제(2)  (0) 2023.08.31
삼항연산자를 이용한 실습  (0) 2023.08.31
조건문을 활용한 예제  (0) 2023.08.31
반복문을 활용한 예제  (0) 2023.08.31
useState 이용 4가지 변수 넣기  (0) 2023.08.31

+ Recent posts

티스토리툴바