State, Layout Component

// children : Layout 컴포넌트를 만들 때 주로 사용

// layout 컴포넌트는 자식 컴포넌트를 가지는 형태

// const User = (props) => {

//   console.log("props=>", props);

//   return <div>user {props.children}</div>;

// };

// function Layout(props) {

//   const children = props.children;

//   return (

//     <main>

//       <header>header</header>

//       {children}

//       <footer>footer</footer>

//     </main>

//   );

// }

const App = () => {

  // return <User abc="123">hi</User>;

  // return (

  //   <Layout>

  //     <div>App</div>

  //   </Layout>

  // );

  const title = "title";

  return (

    <div>

      <h1>test</h1>

      <Todo title={title} />

    </div>

  );

};

export default App;

// title 값이 혹시라도 없을 경우 대비하여 초기 값 할당

const Todo = ({ title = "no" }) => {

  // console.log("props=>", props);

  // const { title } = props;

  return (

    <div>

      <h3>{title}</h3>todo

    </div>

  );

};

 

// 값의 변경을 State로 만들어야 랜더링 바뀜

import { useState } from "react";

import "./App.css";

function App() {

  const [name, setName] = useState("르순이");

  const handleNameChange = () => {

    setName("신르순");

  };

  return (

    <div>

      <h1>react state</h1>

      <button onClick={handleNameChange}>신르순으로!</button>

      {name}

    </div>

  );

}

export default App;

 

import React, { useState } from "react";

const App = () => {

  const [text, setText] = useState("");

  const handleInputChange = (event) => {

    setText(event.target.value);

  };

  return (

    <div>

      <input

        type="text"

        // onChange 와 value를 쌍으로 묶는게 좋음 -> 제어 컴포넌트

        // value없어도 동작은 함 -> 비제어 컴포넌트

        onChange={handleInputChange}

        value={text}

        //   onChange={(event) =>

        //   {setText(event.target.value);}

        // }

      />

      <br />

      {text}

    </div>

  );

};

export default App;

 

// import { useState } from "react";

// // 원시데이터 : x=1 , y=1 -> 같은 1을 참조하며 변경 시 새로운 공간 할당

// // 참조데이터 : 객체 , 배열 , 함수

// // -> 값이 같아도 다른 공간 참조 / 변경 시 공간 자체 변경

// // 리액트는 리랜더링 실행 여부를 state의 변화로 결정함.

// const App = () => {

//   const [dogs, setDogs] = useState(["말티즈"]);

//   const onClickHandler = () => {

//     // push는 기존 값을 변경하므로 불변성을 깨뜨림

//     // dogs.push("시고르");

//     setDogs([...dogs, "시고르"]);

//   };

//   console.log(dogs);

//   return (

//     <div>

//       <button onClick={onClickHandler}>버튼</button>

//     </div>

//   );

// };

// export default App;

import React, { useState } from "react";

function App() {

  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {

    // items.push(items.length + 1); 배열에 직접 push, 불변성 위반

    setItems([...items, ++items.length]); // 상태 업데이트

  };

  return (

    <div>

      <button onClick={addItem}>Add Item</button>

      <ul>

        {items.map((item, index) => (

          <li key={index}>{item}</li>

        ))}

      </ul>

    </div>

  );

}

export default App;