리액트 기초이론 3 - JSX 문법 해답

 

* 연습과제 2

import './App.css';
import React, { Component } from 'react'

class App extends Component {
  render(){
    const users = [
      {name: 'victoria', age: 13, city: 'seoul', email: 'victoria@gmail.com'},
      {name: 'sun', age: 34, city: 'busan', email: 'sun@gmail.com'},
      {name: 'johseb', age: 25, city: 'busan', email: 'johseb@gmail'}, // 탈락
      {name: 'syleemomo', age: 9.23, city: 'seoul', email: 'syleemomo@nate.com'}, // 탈락
      {name: 'hannah', age: 41, city: 'daegu', email: 'hannah0923*gmail.com'}, // 탈락
      {name: 'shara', age: 37, city: 'seoul', email: 'shara@gmail.com'},
      {name: 'martin', age: -34, city: 'daegu', email: 'martin@gmail.com'}, // 탈락
      {name: 'gorgia', age: 39, city: 'seoul',  email: 'gorgia@gmail.com'},
      {name: 'nana', age: 24, city: 'busan', email: 'nana@gmail.com'},
      {name: 'dannel', age: 19, city: 'seoul', email: 'dannel@gmail.com'},
    ]
  
    return (
      <div className='App'>
        <h1>* 유효한 사용자 정보 *</h1><br/>
        {users
          .filter(user => user.age > 0 && parseInt(user.age) === user.age)
          .filter(user => user.email.indexOf('@') > -1 && user.email.indexOf('.com') > -1)
          .map( (user, id) => {
            return (
              <div key={id}>
                <h3>{user.name} ({user.age})</h3>
                <h3>{user.city}</h3>
                <h3>{user.email}</h3>
                <h3>----------------------------</h3>
              </div>
            )
          })
        }
      </div>
    )
  }
  
}

export default App;

 

* 연습과제 3

해답 1

import './App.css';
import React, { Component } from 'react'

class App extends Component {
  state = {
    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'},
    ],
    updatedFriends: null
  }
  // 구현하기
  filterCity = (city) => {
    console.log(city)
    const { friends } = this.state
    this.setState({ updatedFriends: friends.filter(friend => friend.city === city)})
  }

  render(){
    let { friends, updatedFriends } = this.state 
    friends = updatedFriends || friends
    return (
      <>
        <button onClick={() => this.filterCity("seoul")}>서울</button>
        <button onClick={() => this.filterCity("busan")}>부산</button>
        <button onClick={() => this.filterCity("daegu")}>대구</button>

        {/* 구현하기 */}
        <h1>필터링된 사용자 조회</h1>
        {friends.map( (friend, id) => {
          return (
            <div key={id}>
              <h3>이름: {friend.name} 나이: {friend.age} 지역: {friend.city}</h3>
            </div>
          )
        })}

      </>
    ) 
  }
}

export default App;

해답 2

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import FriendList from './FriendList'

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' },
]

function App() {


  return (
    <>
      <FriendList friends={friends}></FriendList>
    </>
  )

}

export default App;

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

class FriendList extends Component {
    state = {
        updatedFriends: null
    }
    filterCity = (city) => {
        console.log(city)
        this.setState({ updatedFriends: this.props.friends.filter(friend => friend.city === city) })
    }

    render() {
        const { updatedFriends } = this.state
        const friends = updatedFriends === null ? this.props.friends : updatedFriends
        return (
            <>
                <button onClick={() => this.filterCity("seoul")}>서울</button>
                <button onClick={() => this.filterCity("busan")}>부산</button>
                <button onClick={() => this.filterCity("daegu")}>대구</button>

                <h1>필터링된 사용자 조회</h1>
                {friends && friends.map((friend, id) => {
                    return (
                        <Friend key={id} {...friend}></Friend>
                    )
                })}
            </>
        )
    }
}
export default FriendList

import React from 'react'

function Friend({ name, age, city }) {
    return (
        <div>
            <h3>이름: {name} 나이: {age} 지역: {city}</h3>
        </div>
    )
}
export default Friend

 

* 연습과제 4

import './App.css';
import React, { Component } from 'react'

const signs = [
  [
    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ],
  [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 0, 0, 1, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
  ],
  [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 1, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ],
  [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 1, 1, 1, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 1, 0, 1, 0],
    [0, 1, 1, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ],
  [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
  ]
]

class App extends Component {
  state = {
    index: 0,
  }

  // 구현하기
  redraw = () => {
    // console.log('redraw')
    this.setState({ index: this.state.index + 1 })
  }

  componentDidMount() {
    setInterval(this.redraw, 1000)
  }

  // 구현하기
  render() {
    const { index } = this.state
    const sign = signs[index % signs.length]

    return (
      <div className='sign'>
        {sign.map((row, i) => {
          return row.map((column, j) => {
            // console.log(sign[i][j])
            return (
              <div key={i + j} className={sign[i][j] === 0 ? 'cell' : 'cell bright'}></div>
            )
          })
        })}

      </div>
    )
  }
}

export default App;

body{
  margin: 0;
  padding: 0;
  background: black;
}
.sign{
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background: black;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cell{
  width: 10px; 
  height: 10px;
  background: blue;
}
.bright{
  background: red;
}