useState 함수를 이용한 Comment 출력

// 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

          src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"

          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;

  }