[React] chapter_04

빈 이미지와 함께 화면에 출력해보기
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

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

          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"

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

//         isUpdate=true

function C_Comment_Exam2() {

    // 힌트 : 변수/함수 정의

    let [img, setImg]

        = useState("https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png")

    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

 

리액트의 반복문 : 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

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

                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>&nbsp;

              <span>{comment.publisher}</span>&nbsp;

              <span>{comment.author}</span>&nbsp;

              <span>{comment.stock}</span>&nbsp;

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

      img: "http://t1.daumcdn.net/webtoon/op/478cdf37f585607982ffa9e35b432e8503be8a54",

      isUpdate: true,

    },

    {

      name: "프롬 스타",

      link: "https://webtoon.kakao.com/content/%ED%94%84%EB%A1%AC-%EC%8A%A4%ED%83%80/1573",

      img: "http://t1.daumcdn.net/webtoon/op/a7fb953d722c1130bfc18440f7e3ce448ece57a1",

      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",

      img: "http://t1.daumcdn.net/webtoon/op/a816281cb4df5c50a20ac386fd6e496643d0f085",

      isUpdate: false,

    },

    {

      name: "빛나는 손을",

      link: "https://webtoon.kakao.com/content/%EB%B9%9B%EB%82%98%EB%8A%94-%EC%86%90%EC%9D%84/1366",

      img: "http://t1.daumcdn.net/cartoon/5913FCAC0234C50001",

      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;