React 배열의 항목 수정하기

2020/React 2020. 4. 1. 14:23
반응형

App.js

import React, { useRef, useState } from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";
import CreateUser from "./CreateUser.js";

function App() {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
      active: true
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
      active: false
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };
  const onRemove = id => {
    setUsers(users.filter(user => user.id !== id));
  };
  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
}

export default App;

UserList.js

import React from "react";

function User({ user, onRemove, onToggle }) {
  const { username, email, id, active } = user;
  return (
    <div>
      <b
        style={{ color: active ? "green" : "black", cursor: "pointer" }}
        onClick={() => onToggle(id)}
      >
        {username}
      </b>{" "}
      <span>({email})</span>
      <button onClick={() => onRemove(id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

react #배열 항목 제거하기  (0) 2020.04.01
React 새로운 배열 추가하기  (0) 2020.03.31
React 배열 렌더링하기  (0) 2020.03.31
React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

react #배열 항목 제거하기

2020/React 2020. 4. 1. 14:12
반응형

app.js

import React, { useRef, useState } from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";
import CreateUser from "./CreateUser.js";

function App() {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com"
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com"
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com"
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };
  const onRemove = id => {
    setUsers(users.filter(user => user.id !== id));
  };

  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}

export default App;

UserList.js

import React from "react";

function User({ user, onRemove }) {
  const { username, email, id } = user;
  return (
    <div>
      <b>{username}</b> <span>({email})</span>
      <button onClick={() => onRemove(id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map((user, index) => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

React 배열의 항목 수정하기  (0) 2020.04.01
React 새로운 배열 추가하기  (0) 2020.03.31
React 배열 렌더링하기  (0) 2020.03.31
React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

React 새로운 배열 추가하기

2020/React 2020. 3. 31. 18:42
반응형

App.js

import React, { useRef, useState } from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";
import CreateUser from "./CreateUser.js";

function App() {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com"
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com"
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com"
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

CreateUser.js

import React from "react";

//4가지의 props를 받아옴
function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

export default CreateUser;

 

출처 : 벨로퍼트님의 강의 예제입니다.

 

반응형
저작자표시

'2020 > React' 카테고리의 다른 글

React 배열의 항목 수정하기  (0) 2020.04.01
react #배열 항목 제거하기  (0) 2020.04.01
React 배열 렌더링하기  (0) 2020.03.31
React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

React 배열 렌더링하기

2020/React 2020. 3. 31. 13:04
반응형

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
import UserList from "./UserList.js";

function App() {
  return <UserList />;
}
export default App;

 

UserList.js

import React from "react";

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "sh",
      email: "sh@gmail.com"
    },
    {
      id: 2,
      username: "js",
      email: "js@mgail.com"
    },
    {
      id: 3,
      username: "hs",
      email: "hs@gmail.com"
    }
  ];

  return (
    <div>
      {users.map((user, index) => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

react #배열 항목 제거하기  (0) 2020.04.01
React 새로운 배열 추가하기  (0) 2020.03.31
React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
Counter 만들기 useState  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

React useRef로 Dom 선택하기

2020/React 2020. 3. 31. 12:27
반응형

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return <InputSample />;
}
export default App;

 

InputSample.js

import React, { useState, useRef } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });

  const nameInput = useRef();

  const { name, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    //객체 상태를 업데이트 할때에는 객체를 복사하고 나서 덮어씌우고 업데이트 해줘야 한다.

    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
    nameInput.current.focus();
  };
  return (
    <div>
      <input name="name" onChange={onChange} placeholder="이름" value={name} />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
        ref={nameInput}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: 닉네임</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

React 새로운 배열 추가하기  (0) 2020.03.31
React 배열 렌더링하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
Counter 만들기 useState  (0) 2020.03.30
React 조건부 렌더링  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

InputSample

2020/React 2020. 3. 30. 19:24
반응형

app.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return <InputSample />;
}
export default App;

InputSample.js

import React, { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });
  const { name, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    //객체 상태를 업데이트 할때에는 객체를 복사하고 나서 덮어씌우고 업데이트 해줘야 한다.

    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
  };
  return (
    <div>
      <input name="name" onChange={onChange} placeholder="이름" value={name} />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: 닉네임</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

React 배열 렌더링하기  (0) 2020.03.31
React useRef로 Dom 선택하기  (0) 2020.03.31
Counter 만들기 useState  (0) 2020.03.30
React 조건부 렌더링  (0) 2020.03.30
React Children  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

Counter 만들기 useState

2020/React 2020. 3. 30. 19:22
반응형

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return <Counter />;
}
export default App;

Counter.js

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  };
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

React useRef로 Dom 선택하기  (0) 2020.03.31
InputSample  (0) 2020.03.30
React 조건부 렌더링  (0) 2020.03.30
React Children  (0) 2020.03.30
첫번째 컴포넌트  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,

React 조건부 렌더링

2020/React 2020. 3. 30. 19:19
반응형

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}></Hello>
      <Hello color="pink"></Hello>
    </Wrapper>
  );
}
export default App;

Hello.js

import React from "react";

//첫번째 컴퍼넌트 생성
// function Hello(props) {
//   return (
//     <div
//       style={{
//         color: props.color
//       }}
//     >
//       안녕하세요{props.name}
//     </div>
//   );
// }
// 비구조화 할당시
function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color
      }}
    >
      {/* isSpecial값이 true면 * 추가 아니면 null*/}
      {isSpecial ? <b>*</b> : null}
      {/* {isSpecial && <b>*</b>} */}
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음"
};
export default Hello;
반응형
저작자표시

'2020 > React' 카테고리의 다른 글

InputSample  (0) 2020.03.30
Counter 만들기 useState  (0) 2020.03.30
React Children  (0) 2020.03.30
첫번째 컴포넌트  (0) 2020.03.30
react InputSample  (0) 2020.03.30
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바