리액트 기초이론 2 - state & props 해답

 

* 연습과제 1

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

class App extends Component {
  state = {
    cnt: 0
  }
  countNumber = () => {
    this.setState({cnt: this.state.cnt + 1})
  }
  render(){
    const {cnt} = this.state
    return (
      <div className="App">
        <h1>카운트: {cnt}</h1>
        <button type="button" onClick={this.countNumber}>change name</button>
      </div>
    )
  }
}

export default App;

 

* 연습과제 2

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

class App extends Component {
  state = {
    title: "변경전 제목"
  }
  changeTitle = () => {
    this.setState({title: "제목 업데이트"})
  }
  render(){
    const {title} = this.state
    return (
      <div className="App">
        <h1>제목: {title}</h1>
        <button type="button" onClick={this.changeTitle}>change title</button>
      </div>
    )
  }
}

export default App;

 

* 연습과제 3

import React, { Component } from 'react'

class Cart extends Component{
    state = {
        cart: []
    }

    //구현하기
    addProduct = () => {
        const product = prompt("원하시는 상품을 추가해주세요 !")
        this.setState({cart: [...this.state.cart, product]})
    }

    // 구현하기
    render(){
        const { cart } = this.state 
        return (
            <>
                <button onClick={this.addProduct}>상품 추가하기</button>
                <h1>상품 목록</h1>
                <h2>------------</h2>
                {cart.map( (product, id) => {
                    return (
                        <h3 key={id}>{product}</h3>
                    )
                })}
            </>
        )
    }
}
export default Cart

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

class App extends Component {
  render(){
    return (
      <div className="App">
       <Cart/>
      </div>
    )
  }
}

export default App;

 

* 연습과제 4

import React, { Component } from 'react'

class PhotoGallery extends Component{
    state = {
        photos: []
    }

    //구현하기
    addPhoto = () => {
        const photo = prompt("추가하려는 사진의 경로를 입력해주세요 !")
        this.setState({photos: [...this.state.photos, photo]})
    }

    // 구현하기
    render(){
        const { photos } = this.state 
        return (
            <>
                <button onClick={this.addPhoto}>사진추가하기</button>
                <h1>포토 갤러리</h1>
                <h2>------------</h2>
                {photos.map( (photo, id) => {
                    return (
                        <img key={id} src={photo}></img>
                    )
                })}
            </>
        )
    }
}
export default PhotoGallery

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

class App extends Component {
  render(){
    return (
      <div className="App">
       <PhotoGallery/>
      </div>
    )
  }
}

export default App;

 

* 연습과제 5

import React, { Component } from 'react'

class CommentFilter extends Component{
    state = {
        comment: this.props.comment.split(' '),
        insults: ['바보', '똥개', '그지', '임마', '새끼', '죽을']
    }
    filterComment = () => {
        const { insults } = this.state // 댓글을 음절 단위로 끊기

        for(let insult of insults){ // 욕설 필터링
            // this.setState({comment: this.state.comment.filter(word => !word.includes(insult)) })

            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes(insult)) }
            })
        }
    }
    componentDidMount(){
        this.filterComment()
    }
    render(){
        const { comment } = this.state
        console.log(comment)
        return (
            <>
                <h2>{comment.join(' ')}</h2>
            </>
        )
    }
}
export default CommentFilter

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

class App extends Component {
  render(){
    return (
      <div className="App">
        <h1>필터링된 댓글</h1>
        <h2>==============</h2>
       <CommentFilter comment="너는 진짜 못말리는 바보 똥개다"/>
       <CommentFilter comment="임마! 너 그렇게 살지마! 그지 새끼야 !"/>
       <CommentFilter comment="야 씨~ 너 죽을래? 진짜 ! 콱! 마! "/>
      </div>
    )
  }
}

export default App;

 

import React, { Component } from 'react'

class CommentFilter extends Component{
    state = {
        comment: this.props.comment.split(' '),
        insults: ['바보', '똥개', '그지', '임마', '새끼', '죽을']
    }
    filterComment = () => {
        const { insults } = this.state // 댓글을 음절 단위로 끊기

        // for(let insult of insults){ // 욕설 필터링
            // this.setState({comment: this.state.comment.filter(word => !word.includes(insult)) })

            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('바보')) }
            })
            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('똥개')) }
            })
            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('그지')) }
            })
            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('임마')) }
            })
            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('새끼')) }
            })
            this.setState( (prevState) => {
                return { comment: prevState.comment.filter(word => !word.includes('죽을')) }
            })
        // }
    }
    componentDidMount(){
        this.filterComment()
    }
    render(){
        const { comment } = this.state
        console.log(comment)
        return (
            <>
                <h2>{comment.join(' ')}</h2>
            </>
        )
    }
}
export default CommentFilter