리액트 기초 정리

 

EditForm.js

import { useState } from "react";

const EditForm = ({user, updateUser}) => {

    const[formData, setFormData] = useState(user);
    //수정하기 전에 수정하고자 하는 유저 정보 담을 공간 작성

const changeValue = (e) => { //이벤트가 발생하면 이벤트가 발생한 곳에 name(속성)과 value(속성)를 가져옴
    const {name, value} = e.target;
    setFormData({...formData, [name] : value});
}

const submitUpdatedData = (e) => {
    e.preventDefault();
    updateUser(formData);
}
console.log(formData);
    return(
        <div>
            <form>{/* 폼 = submit button = onSubmit */}
                <h2>회원 정보 수정</h2>
                <label>
                    이름 : <input type="text" name="name" value={formData.name} onChange={changeValue}/>
                    나이 : <input type="number" name="age" value={formData.age} onChange={changeValue}/>
                    성별 :  <input type="text" name="gender" value={formData.gender} onChange={changeValue}/>
                    전화번호 : <input type="text" name="phone" value={formData.phone} onChange={changeValue}/>
                </label>
                <button type="button" onClick={submitUpdatedData}>저장하기</button>
            </form>
        </div>
    )
}
export default EditForm;

 

<User
    key={"user" + index} 
    user={item} userList={userList} setUserList={setUserList} modifyUser={setEditUser}
/>

유저 리스트를 item으로 유저 정보를 한 명씩 전달 받음.
전달받은 유저정보를 user 변수명에 item에 담긴 유저 한 명의 정보를 저장
저장된 user 변수명을 가져와서 EditForm에 아래와 같이 작성

formData = { name: "유저1", age: 24, gender: "남자", phone: "010-2732-2241" }

const [formData, setFormData] = useState(user);
user에 담긴 정보가 formData라는 변수에 저장

 

 

MemberList.js

import { useState } from "react";
import User from "./User";
import EditForm from "./EditForm";
import './MemberList.css';

function MemberList() {

    //DB에 값이 없거나 초기값 목록들을 작성하는 방법
    const [userList, setUserList] = useState([
        { name: "유저1", age: 24, gender: "남자", phone: "010-2732-2241" },
        { name: "유저2", age: 27, gender: "여자", phone: "010-2674-0093" },
        { name: "유저3", age: 30, gender: "남자", phone: "010-3784-2834" },
    ]);
    const [editUser, setEditUser] = useState(null);

    const updateUser = (유저수정하기) => {
        setUserList(userList.map(
            user =>  ( user === editUser ?  유저수정하기  :  user)
        )); //유저 수정하기 버튼을 누르면 유저 수정을 진행
        setEditUser(null);
      }
    return (
        <div className="App">
            <h1>회원 정보 출력</h1>
            <hr></hr>
            <table className="member_tbl">
                <thead>
                    <tr>
                        <th>이름</th>
                        <th>나이</th>
                        <th>성별</th>
                        <th>전화번호</th>
                        <th>삭제</th>
                        <th>수정</th>
                    </tr>
                </thead>
                <tbody>
                    {userList.map((item, index) => (
                        (
                            <User
                                key={"user" + index}
                                user={item}
                                userList={userList}
                                setUserList={setUserList}
                                modifyUser={setEditUser}
                            />
                        )
                    ))}
                </tbody>
            </table>
            {/*만약 수정버튼의 동작이 감지되면 수정하는 js 파일 보여주기 */}
            {editUser && (
                <EditForm user={editUser} updateUser={updateUser}/>
            )}
        </div>
    );
}


export default MemberList;

 

1. 삼항 연산자를 사용해서 유저 정보 수정하기

const updateUser = (유저수정하기) => {
    setUserList(userList.map(
        user => {user === editUser ? updateUser : user}
    ));
}

2. 삼항 연산자를 쓰지 않고 유저 정보 수정하기

const updateUser = (유저수정하기) => {
    setUserList(userList.map(
        user => updateUser
    )); 
}

 

 

UserList.js

import './App.css';
import {useState} from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');

  const 추가버튼 = () => {
    setUsers([...users, name]);
    setName('');
  }

  const 삭제버튼 = (index) => {
    //users : 유저 목록  user : 유저명   i : users에 있는 유저가 저장된 번호
    setUsers(users.filter((user,i) => i !== index)); // 유저 목록 교체

  }
  return (
    <div className="App">
      <h1>유저 리스트</h1>
      <h3>유저 추가하기</h3>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
      <button onClick={추가버튼}>추가</button>
    
    
      <h3>유저 리스트 보기</h3>
      <pre><h4>인덱스   -   유저명</h4></pre>
      {users.map((user, index) => (
        <li key={index}>
        {index} - {user}
        <button onClick={() => 삭제버튼(index)}>삭제</button>
        </li> 
        
      ))}
      
    </div>
  );
}

export default UserList;

 

** { } ( ) 차이

const 기능 = () => {
  return 리턴값  // 다만 return이 필수인건 아님
}

const 기능 = () => (
  // return 없음
)

ex)

const 인사기능 = () => {
  const 인사메세지 = "안녕하세요";
  return 인사메세지;
}

const 인사기능 = () => (
  alert("좋은 아침입니다.");
)

 

<input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
<button onClick={() => 삭제버튼(index)}>삭제</button>

- e = 변화하는 값이나 변화가 있음을 감지

- button의 경우 클릭의 용도만 있고 특정 값이 임의로 설정되는 일이 없기 떄문에 버튼에서는 e같은 변수명을 생략

- input의 경우 사용자가 어떤 값을 작성할지 모르기 때문에 사용자가 입력한 값을 이벤트로 받아들이고 이벤트가 감지되면 value값으로 취급함

 

*** filter 구문 해석

setUsers(users.filter((user,   index) => index !== index));
        유저목록      유저명  유저번호 => 배열에 저장된번호 !== 삭제하려고 누른 번호
->배열에 저장된 번호와 삭제하려고 누른 번호가 같지 않은 사람만 배열에 등록

setUsers(users.filter((user,   index) => index === index));
-> 삭제버튼을 누른 번호 의외의 모든 번호를 삭제

 

 

User.js

import React from 'react';

const User = ({user, userList, setUserList, modifyUser}) => {

    const deleteUser = () => {
        const newUserList = userList.filter((item) => item !== user);
                                        // item === user : 선택한 것 이외 모두 삭제
        setUserList(newUserList);
    };


    return (
        <tr>
            <td>{user.name}</td>
            <td>{user.age}</td>
            <td>{user.gender}</td>
            <td>{user.phone}</td>
            <td>
                <button onClick={deleteUser}>삭제하기</button>
            </td>
            <td>
                <button onClick={() => modifyUser(user)}>수정하기</button>
            </td>
        </tr>
    );
};
export default User;

 

** 매개변수

1번 : const User = ({ user, userList, setUserList, 수정버튼 }) => {

2번 : const User = (props) => {
    const user = props.user;
    const userList = props.userList;
    const setUserList = props.setUserList;
    const 수정버튼 = props.setEditUser;

1번과 2번은 같은 의미

 

** 필터 문법

const newUserList1 = userList.filter((item) => {return item === user; });
const newUserList2 = userList.filter((item) =>  item === user );

위에건 구문법

 

** function App() {} 와 const App = () => {} 의 차이

 

* function App () {}
    - index 다음에 특정 js가 최상위에서 시작할 때 function
    - 제일 먼저 기능이 되지는 않음
        -> function 이전에 다른 코드가 와도 그 코드 실행 이후에 function이 실행이 됨
        -> 즉 App 함수 정의보다 특정 함수(App) 호출이 먼저 있어도 문제 없음

 

* const App = () => {}
    - 이외에는 모두 const 사용
    - 자신이 작성한 js 내에서는 가장 최상위임
        -> const 이전에 작성한 코드는 작동을 안함.
        -> const로 가장 중점이 되는 코드를 선언해준 다음에 다른 기능을 작성해야함
        -> 즉 App 함수 정의보다 특정 함수 호출(App)이 먼저 있으면 그 특정 함수가 기능을 안함

ex)
console.log(App()); // 'Hello'가 출력됩니다.
function App() {
    return 'Hello';
}


ex)
console.log(App()); // TypeError: App is not a function
const App = () => {
    return 'Hello';
};