리엑트 ㅇ_ㅇ

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

import BucketList from './Bucket_List';
import React from 'react';

// import {BucketList} from "./Bucket_List"
// export 로 포함할 때 쓰는 방법

class App extends React.Component{
constructor(props){
super(props);

this.state ={ 
  list: ["영화관 가기", "매일 책읽기", "수영 배우기"]
}

}
// 컴포넌트에 필요한 기본적인 데이터를 생성자를 통해 생성해주는 것

render(){ // 필수함수, 리턴되는 값은 무조건 1개는 있어야한다.
console.log(this.state.list);

return(
  <div className="App">
    <BucketList list={this.state.list}/> 
    props 명  = 데이터 
  </div>
);

}
}

// function App() {
// return (
//

// );
// }

export default App;

import React from "react"
import Nemo from "./Nemo";

class App extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      count: 3
    };
  }

  componentDidMount() { }
  
  addNemo = () => {
    this.setState({ count : this.state.count + 1});
    // 스테이트가 딕셔너리 상태이기 때문에 똑같이 맞춰줘야한다. 
  }

  remoneNemo = () => {

    if (this.state.count > 0) {
          this.setState({ count: this.state.count - 1 });      
    } else {
      window.alert("네모가 없어요 8ㅅ8")
    }

  }


  render() {

    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);

    console.log(this.state)

    return (
      <div className="App">
        <Nemo/>
        {nemo_count.map((n,i) => {
          return (
            <div
              key={i}
              // 가상돔 key, 실제돔 key 값이 다르기 때문에 비교가 어려움(무조건 새것으로 인식 후 렌더)
              // 키값에 대한 경고가 뜨지 않도록 생성시점에 같은 키값으로 할당
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px"
              }}>
              nemo
            </div>
          );
        })}

        <div>
          <button onClick={() => {
            //<button onClick={this.addNemo}> 이렇게 표현해도 됨 
            // this.addNemo()  하게되면 즉시실행되므로 버튼을 안눌러도 실행처리됨
            // 꼭 () 빼고 쓰세오 
            this.addNemo();
          }}>하나 추가</button>
          <button onClick={this.remoneNemo}>하나 빼기</button>
        </div>
       
      </div>
    );
  }
}



export default App;

import React from "react"

const Nemo = (props) => {
    const [count, setCount] = React.useState(3);
    // 스테이트의 값 / 카운트를 수정하는 어떤 함수 / 스테이트게 들어가는 초기값 
    const nemo_count = Array.from({ length: count }, (v, i) => i);

    // 클레스형이 아니라 함수형이기 때문에 선언해준 후 함수를 만들어야한다. 
    const addNemo = () => {
        setCount(count+1);
    }

    const removeNemo = () => {
        if (count > 0) {
            setCount(count - 1);
        }else window.alert("네모가 없어요 9ㅅ9")
    }



    return (
        <>
            {/* 리턴안에 있는 문구들이 리엑트 요소가 아닌 것 같아?  공백도 있어, 아래 문구 이상해? 
            이럴때는 감싸는 태그로 감싸주면 해결됨 */}
         { nemo_count.map((n,i) => {
          return (
           
            <div
              key={i}
              // 가상돔 key, 실제돔 key 값이 다르기 때문에 비교가 어려움(무조건 새것으로 인식 후 렌더)
              // 키값에 대한 경고가 뜨지 않도록 생성시점에 같은 키값으로 할당
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px"
              }}>
              nemo
            </div>
          );
        })}

        <div>
          <button onClick={addNemo} >하나 추가</button>
          <button onClick={removeNemo}>하나 빼기</button>
        </div></>
    );
    
}

export default Nemo;

import React from "react";
import logo from "./logo.svg";
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from "./BucketList";
import styled from "styled-components";


// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
    constructor(props) {
        super(props);
        // App 컴포넌트의 state를 정의해줍니다.
        this.state = {
            list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
        };

        this.text = React.createRef();
    }

    componentDidMount() {
        console.log(this.text);
    }


    addBucket = () => {
        this.setState({ list: [...this.state.list, this.text.current.value] });
        // 스프레드 문법... push 같은 소리하네 나..
        // [...this.state.list , 넣고 싶었던 어떤 값]
    }

    // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
    render() {

        console.log(this.text.current);
        return (
            <AppWrap>
                <Container>
                    <Title >내 버킷리스트</Title>
                    <Line />
                    {/* 컴포넌트를 넣어줍니다. */}
                    {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
                    <BucketList list={this.state.list} />
                </Container>

                <InputWrap>
                    <input type="text" ref={this.text}
                        onChange={() => {
                            console.log(this.text.current.value)
                        }} />
                    <button onClick={this.addBucket}> 입력하기</button>
                </InputWrap>
            </AppWrap>
        );
    }
}

const AppWrap = styled.div`
background-color: #eee;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
`;

const Container = styled.div`
background-color: #fff;
width: 50vw;
max-width: 350px;
margin: auto;
height: 80vh;
padding: 16px;
border: 1px solid #ddd;
border-radius: 5px;
`;

const Title = styled.h1`
color: slateblue;
text-align: center;
`;

const Line = styled.hr`
margin: 16px 0px;
`;


const InputWrap = styled.div`
background-color: #fff;
width: 50vw;
max-width: 350px;
margin: auto;
padding: 16px;
border: 1px solid #ddd;
border-radius: 5px;
`;

export default App;