리액트 기초이론 1 - 클래스형 컴포넌트 & 함수형 컴포넌트 해답

 

* 연습과제 1

import React from 'react';

class Friend extends React.Component {
  render() {
    const { name, age, city } = this.props
    
    return (
    	<>
            <h3>{name}</h3>
            <h4>{age}</h4>
            <h4>{city}</h4>
            <h4> ----------------- </h4>
        </>
    )
  }
}

export default Friend;

해답 1

import logo from './logo.svg';
import './App.css';
import Friend from './Friend'

function App() {
  return (
    <div className="App">
      <Friend name="victoria" age="13" city="seoul"/>
      <Friend name="sun" age="34" city="busan"/>
      <Friend name="johseb" age="25" city="busan"/>
      <Friend name="syleemomo" age="9" city="seoul"/>
      <Friend name="hannah" age="41" city="daegu"/>
      <Friend name="shara" age="37" city="seoul"/>
      <Friend name="martin" age="28" city="daegu"/>
      <Friend name="gorgia" age="39" city="seoul"/>
      <Friend name="nana" age="24" city="busan"/>
      <Friend name="dannel" age="19" city="seoul"/>
    </div>
  );
}

export default App;

해답 2

import React, { Component } from 'react'
import Friend from './Friend'

const friends = [
  {name: 'victoria', age: 13, city: 'seoul'},
  {name: 'sun', age: 34, city: 'busan'},
  {name: 'johseb', age: 25, city: 'busan'},
  {name: 'syleemomo', age: 9, city: 'seoul'},
  {name: 'hannah', age: 41, city: 'daegu'},
  {name: 'shara', age: 37, city: 'seoul'},
  {name: 'martin', age: 28, city: 'daegu'},
  {name: 'gorgia', age: 39, city: 'seoul'},
  {name: 'nana', age: 24, city: 'busan'},
  {name: 'dannel', age: 19, city: 'seoul'},
]

export default class App extends Component {
  render(){
    return (
      <>
      {friends.map( (friend, id) => {
        return <Friend key={id} name={friend.name} age={friend.age} city={friend.city}/>
      } )}
       
       
      </>
    )
  }
}

 

* 연습과제 2

import React from 'react';

class Person extends React.Component {
  state = {
      name: "sunrise",
      age: 23,
      friends: [
          "victoria",
          "daniel",
          "hanna"
      ]
  }
  displayInfo = () => {
      const { name, age, friends } = this.state
      alert(`
        * 신상정보 *
        -------------------------
        이름 : ${name}
        나이 : ${age}
        친구 : ${friends.join(' ')}
      `)
  }
  
  render() {    
    return (
    	<>
            <button onClick={this.displayInfo}>신상정보 확인하기</button>
        </>
    )
  }
}

export default Person;

 

* 연습과제 3

import React from 'react';

class Book extends React.Component {
  state = {
      title: '해리포터',
      author: '조앤K롤링',
      summary: '해리포터가 마법사로 성장해나가는 과정을 그린 이야기',
      genre: '판타지 소설',
      release: '2003년 9월 4일',
      ISBN: '1234567890'
  }
  
  render() { 
    const { title, author, summary, genre, release, ISBN } = this.state  
    return (
    	<>
            <h1>도서 정보</h1>
            <h3>제목 - {title}</h3>
            <h3>저자 - {author}</h3>
            <h3>줄거리 - {summary}</h3>
            <h3>장르 - {genre}</h3>
            <h3>출판일 - {release}</h3>
            <h3>ISBN - {ISBN}</h3>
        </>
    )
  }
}

export default Book;

import logo from './logo.svg';
import './App.css';
import Book from './Book'

function App() {
  return (
    <div className="App">
      <Book/>
    </div>
  );
}

export default App;

 

* 연습과제 4

import React from 'react';

function Animal({ type, name, size, sound, appearence }) {
    return (
    	<>
            <h1>동물 정보</h1>
            <h3>종류 - {type}</h3>
            <h3>이름 - {name}</h3>
            <h3>크기 - {size}</h3>
            <h3>소리 - {sound}</h3>
            <h3>생김새 - {appearence} -</h3>
        </>
    )
  
}

export default Animal;

import logo from './logo.svg';
import './App.css';
import Animal from './Animal'

function App() {
  return (
    <div className="App">
      <Animal type='cat' name='meyow' size='small' sound='low' appearence='cute'/>
    </div>
  );
}

export default App;