React Practice(1)

App.js

import logo from './logo.svg';
import './App.css';
import Device from './Device';
import Counter from './Counter';
import Food from './food';
import Movie from './Movie';
import Counter2 from './Counter2';
import MyDevice from './MyDevice';
import MyDevice1 from './MyDevice1';
import MyDevice2 from './MyDevice2';

function App() {
  const mydataApp={
    "myDeviceData":[
      {
        name:"갤럭시1",
        RAM:10,
        HomeButton:true,
        TouchID: "NO",
        FaceID: "Yes"
      },
      {
        name:"갤럭시2",
        RAM:20,
        HomeButton:true,
        TouchID: "NO",
        FaceID: "NO"
      },
      {
        name:"갤럭시3",
        RAM:30,
        HomeButton:false,
        TouchID: "NO",
        FaceID: "Yes"
      }
    ]
  }
 
  return(
    <div>
      <h3>Counter2 클래스 화살표</h3>
      <Counter2/>
      <hr/>
      <h4>MyDevice 컴포넌트</h4>
      <MyDevice mydata={mydataApp}/>
      <hr/>

      <hr/>
      <h4>MyDevice1 클래스 컴포넌트</h4>
      <MyDevice1 mydata={mydataApp.myDeviceData}/>
      <hr/>
      <h4>MyDevice2 함수형 컴포넌트</h4>
      <MyDevice2 mydata={mydataApp.myDeviceData}/>
      <hr/>

      <Movie title="영화1"/>
      <Movie title="영화2"/>
      <Movie title="영화3"/>
      <Movie title="영화4"/>
      <hr/>
      <h1>안녕</h1>
      <h2>안녕2</h2>
      <Counter/>
      <Food/>
      <Device />
    </div>
  );

}

export default App;

 

Counter.js

import { Component } from "react";

class Counter extends Component{
  constructor(props){
      super(props);
      this.state = {
        count : 0
      }
      this.increaseCount = this.increaseCount.bind(this);
      this.decreaseCount = this.decreaseCount.bind(this);
  }

  //증가
  increaseCount(){
    this.setState(({count})=>{
      return{
        count : count +1
      }
    });
  }

  //감소
  decreaseCount(){
    // this.setState(({count})=>{
    //   return{
    //     count : count -1
    //   }
    // });
    this.setState((st)=>{
      console.log("st :" + st.count)
      return{
        count :st.count-1
      }
    });
  }


  render(){
    return(
      <div>
        <span>카운트 : {this.state.count}</span>
        <button onClick={this.increaseCount}>카운트 증가</button>
        <button onClick={this.decreaseCount}>카운트 감소</button>
      </div>
    )
  }
}

export default Counter;

 

Counter2.js

import { Component } from "react";

class Counter2 extends Component{
  state={
    myAge : 0
  }

  //화살표함수
  plus =()=>{
    //구조분해할당
    this.setState(({myAge})=>({myAge : myAge+1}

    ))

    // this.setState((st)=> ({
    //   myAge : st.myAge+1
    // }))
  }

  minus =()=>{
    this.setState(({myAge})=>({myAge:myAge-1}
      ))
  }

  componentDidMount(){
    console.log("in componentDidMount")
  }

  
  componentDidUpdate(){
    console.log("in componentDidUpdate")
  }

  
  componentWillUnmount(){
    console.log("in componentWillUnmount")
  }

  render(){
    return(
      <div>
        <span>나이{this.state.myAge}</span>
        <button onClick={this.plus}>증가</button>
        <button onClick={this.minus}>감소</button>
      </div>
    )
  }
}
export default Counter2

 

food.js

const mydata = {
  "myfood" : [
    {
      name : "햄버거",
      price : "오천원",
      buy : "배달"
    },
    {
      name : "도시락",
      price : "육천원",
      buy : "포장" 
    },
    {
      name : "커피",
      price : "삼천원",
      buy : "매장"
    }
  ]
}

const myphone={
  "phone" : [
    {
      name:"아이폰",
      ram:"6gb",
      touch:"yes",
      face:"yes"
    },
    {
      name:"갤럭시 노트",
      ram:"8gb",
      touch:"yes",
      face:"yes"
    },
    {
      name:"갤럭시 S22",
      ram:"6gb",
      touch:"no",
      face:"yes"
    },
    {
      name:"갤럭시Z",
      ram:"64gb",
      touch:"yes",
      face:"yes"
    }
  ]
}

function Food(){
  return(
      <div>
        <h1>Food 컴포넌트(음식)</h1>
        {
          mydata.myfood.map((food,i)=>{
            console.log(i)
            console.log(food.name)
            return (
              <div key={i}>
                이름 : {food.name}<br/>
                가격 : {food.price}<br/>
                방법 : {food.buy}<br/><br/>
              </div>  
            )
          })
        }
     
      <h1>Phone 휴대폰 정보</h1>
      {
        myphone.phone.map((p,j)=>{
          return(
            <div key={j}>
              이름:{p.name}<br/>
              램:{p.ram}<br/>
              터치:{p.touch}<br/>
              안면인식:{p.face}<br/><br/>
            </div>
          )
        })
      }
    </div>
  
  )
}

export default Food;


<form>
  <input placeholder="이름" name="name"/>
  <input placeholder="전화번호" name="phone"/>
  <button type="submit">등록</button>
</form>

 

Movie.js

import { Component } from "react";

class Movie extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        <h3>Movie 컴포넌트</h3>
        <div>{this.props.title}</div>
      
      </div>
    )
  }
}

export default Movie;

 

MyDevice.js

//자바스크립트 값을 JSX 내부에서 사용할 때는
//중괄호로 감싸주어야 한다
const MyDevice =({mydata}) =>{
  return(
    <div>
      <h4>MyDevice Test</h4>
      {
        mydata.myDeviceData.map((device,index)=>{
          return(
            <div key={index}>
              키 : {index} <br/>
              이름 : {device.name} <br/>
              램 : {device.RAM} <br/>
              홈버튼 : {(device.HomeButton === true )?'있음':'없음'} <br/>
              터치기능 : {device.TouchID} <br/>
              안면인식 : {device.FaceID} <br/><br/>
            </div>
          )
        })
      }
    </div>
  )
}

export default MyDevice;

 

MyDevice1.js

import { Component } from "react";

class MyDevice1 extends Component{

  render(){
      const {mydata} = this.props;
      return(
        <div>
        {
            mydata.map((device,index)=>{
              return(
                <div key={index}>
                  키 : {index} <br/>
                  이름 : {device.name} <br/>
                  램 : {device.RAM} <br/>
                  홈버튼 : {(device.HomeButton === true )?'있음':'없음'} <br/>
                  터치기능 : {device.TouchID} <br/>
                  안면인식 : {device.FaceID} <br/><br/>
                </div>
              )
            })
          }
        </div>
    ) 
  }
}

export default MyDevice1

 

MyDevice2.js

const MyDevice2 =({mydata})=>{
  return(
    <div>
    {
      mydata.map((device, index)=>(
        <div key={index}>
          키 : {index} <br/>
          이름 : {device.name} <br/>
          램 : {device.RAM} <br/>
          홈버튼 : {(device.HomeButton === true )?'있음':'없음'} <br/>
          터치기능 : {device.TouchID} <br/>
          안면인식 : {device.FaceID} <br/><br/>
        </div>
      ))
    }
    </div>
  )
}


export  default MyDevice2