React(13) - UserList 만들기 미니 웹 만들기

🌈 AddUser.js

import React from "react";
import Card from '../UI/Card';
import classes from './AddUser.module.css';
import Button from './UI/Button';
import {useState} from 'react';
import ErrorModal from "../UI/ErrorModal";

const AddUser = props =>{
    const [enteredUsername, setEnteredUsername] = useState('');

    const [enteredAge, setEnteredAge] =useState('');
    const [error, setError] = useState();

    const addUserHandler =(event) =>{
        event.preventDefault();
        
        //trim() : 앞 뒤 공백 제거(유효성 검사)
        if(enteredUsername.trim().length ===0 || enteredAge.trim().length ===0) {
            setError({
                title : 'Invalid input',
                message : 'Please enter a valid name and age'
            })
            return ;
        }
        if(+enteredAge < 1) {
            setError({
                title : 'Invalid input',
                message : 'Please enter a valid name and age'});
            return ;
        }
 
    
    
    //초기화 로직
        props.onAddUser(enteredUsername, enteredAge);
        console.log(enteredUsername + ' ' + enteredAge)
        setEnteredUsername('');
        setEnteredAge('');
    };

    const usernameChangeHandler = (event) =>{
        setEnteredUsername(event.target.value);

    }

    const ageChangeHandler=(event)=>{
        setEnteredAge(event.target.value);
    }

    const errorHandler =() =>{
        setError(null);
    }

   return(
    <div>{error && <ErrorModal title={error.title} message={error.message }
    onConfirm={errorHandler}/>}
    <Card className={classes.input}>
           <form onSubmit={addUserHandler}>
               <label htmlFor="username">Username</label>
               <input id="username" value={enteredUsername} type="text" onChange={enteredUsername} />
               <label htmlFor="userage">Age(Years)</label>
               <input id="userage" value={ageChangeHandler} type="text" onChange={enteredAge} />
               <Button type="submit">Add User</Button>
           </form>

       </Card></div>
   );
};

export default AddUser;

 

 

🌸 필요한 모듈 임포트해오기 

import React from "react";
import Card from '../UI/Card'; // Card 컴포넌트를 쪼개놓았고, UI 모듈은 재사용을 위한 컴포넌트이다. 
import classes from './AddUser.module.css';
import Button from './UI/Button';
import { useState } from 'react';
import ErrorModal from "../UI/ErrorModal"; //에러를 표현하는 모달창 가져오기

 

🌸 초기값, 업데이트 설정 = useState

- 형태 : const [변수, 변수변경함수] = useState('변수 안에 설정되는 초기값');

  // enteredUsername, enteredAge는 각각 input에 넣어지는 사용자의 이름과 나이를 의미함. 이때 사용자의 나이와 이름은 update되어야 하므로, 초기값 설정 및 변경을 위하여 useState로 관리한다. 
  // error 메세지가 상황에 따라 달라질 수 있으며, 출력 메세지 값과 타이틀이 변경될 수 있으므로 이 역시 useState로 관리한다.
  
  const [enteredUsername, setEnteredUsername] = useState('');
  const [enteredAge, setEnteredAge] = useState('');
  const [error, setError] = useState();

 

🍒 화면에 출력되는 컴포넌트 작성하기

return(
    <div>{error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler} />}
    <Card className={classes.input}>
           <form onSubmit={addUserHandler}>
               <label htmlFor="username">Username</label>
               <input id="username" value={enteredUsername} type="text" onChange={enteredUsername} />
               <label htmlFor="userage">Age(Years)</label>
               <input id="userage" value={ageChangeHandler} type="text" onChange={enteredAge} />
               <Button type="submit">Add User</Button>
           </form>

       </Card></div>
   );

 

🍒 error 모달창 출력 정의

{error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler} />}

- {error && ...}은 error가 truthy 값일 때만 그 이후의 표현식을 실행하게 된다. 즉, &&의 의미는 && 앞에 붙은 부분이 참인 경우에 다음의결과 값을 도출할 수 있는 , if true가 된다. 

- onConfirm은 내장된 특성이 아닌, 만들어낸 특성이다. 따라서 onConfirm을 정의해주어야 되는데 onConfirm은  errorHandler함수를 호출할 수 있도록 작성된 속성이다. (AddUser.js에서 만들어낸 속성이라고 생각하면 됨) error 변수가 존재하면 ErrorModal 컴포넌트를 렌더링하고, 존재하지 않으면 null을 반환하여 아무것도 렌더링하지 않는 것이다. 즉 아래에서 ErrorModal.js에 대해서 설명하겠지만, 

 

 

🍒 input 태그의 상태관리 

               <input id="username" value={enteredUsername} type="text" onChange={usernameChangeHandler} />
               <label htmlFor="userage">Age(Years)</label>
               <input id="userage" value={enteredUserage} type="text" onChange={ageChangeHandler} />
               <Button type="submit">Add User</Button>

 

 

🍒 addUserHandler

- 폼의 submit 이벤트를 처리하며, 유효성 검사를 수행한 후에 사용자를 추가하고 입력 필드를 초기화한다. 이때 유효성 검사는 아래의 if 조건문들이다.

- 유효성 검사에 실패하면 setError 함수를 사용하여 에러를 설정(errorModal 문구를 작성함)

  const addUserHandler = (event) => {
    event.preventDefault();
// trim() : 자바스크립트 내장함수로서, 문자열의 앞과 뒤의 공백을 제거해준다. 
// || : and와 같음 
    if (enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
      setError({
        title: 'Invalid input',
        message: 'Please enter a valid name and age'
      });
      return;
    }
    if (+enteredAge < 1) {
      setError({
        title: 'Invalid input',
        message: 'Please enter a valid name and age'
      });
      return;
    }

    props.onAddUser(enteredUsername, enteredAge);
    console.log(enteredUsername + ' ' + enteredAge)
    setEnteredUsername('');
    setEnteredAge('');
  };

 

🍭 event.preventDefault();   

- addUserHandler 함수에서 폼의 submit 이벤트를 처리하기 전에 호출됩니다. 이렇게 함으로써 폼이 제출될 때 페이지가 다시 로드되는 동작을 막고, 사용자가 정의한 동작인 사용자를 추가하는 로직을 실행할 수 있도록 한다. 주로 form 태그의 submit 속성이 붙게 될 때 사용한다. 

 

🍭 props.onAddUser(enteredUsername, enteredAge)

- props 객체로 전달된 onAddUser 함수를 호출하는 부분이다. 

- enteredUsername과 enteredAge는 현재 입력된 사용자명과 나이를 나타내며, 이 값을 onAddUser 함수에 전달하여 사용자를 추가할 수 있다. 여기서 onAddUser은 props에 종속된 함수 객체이며, 이것을 addUserHandler에서 사용하는 것이다. 즉 부모컴포넌트에서 (AddUser.js를 사용하는 컴포넌트에서) 이 함수를 정의해야 함

- enteredUsername, entereAge는 input value에 작성된 입력변수들이고 이 친구들을 그대로 가져와서 onAddUser함수에서 처리함. 

 

🍭 setEnteredUsername(''); setEnteredAge('');

- 입력 필드를 초기화하는 부분

- enteredUsername 상태를 빈 문자열로 설정하여 사용자명 입력 필드를 비우고, setEnteredAge('')는 enteredAge 상태를 빈 문자열로 설정하여 나이 입력 필드를 비우게 되어 다음 사용자를 추가할 수 있도록 한다. 

 

- +enteredAge는 enteredAge 변수를 숫자로 형변환하는 부분으로, enteredAge는 문자열 형태로 입력된 나이 값이기 때문에, + 연산자를 사용하여 숫자로 변환해야 한다. 

 

📙 UI

 

🌈 ErrorModal.js

import React from "react";
import Card from './Card';
import Button from './Button';
import classes from './ErrorModal.module.css';

const ErrorModal = props =>{
    return (
        <div>
            <div className={classes.backdrop} onClick={props.onConfirm}></div>
        <Card className={classes.modal}>
            <header className={classes.header}>
                <h2>{props.title}</h2>
            </header>
            <div className={classes.content}>
                <p>{props.message}</p>
            </div>
            <fotter className={classes.action}>
                <Button onClick={props.onConfirm}>Okay</Button>

            </fotter>

        </Card>
        </div>

    );
};


export default ErrorModal;

- 사실... ErrorModal 컴포넌트에 대해서 설명할 것은 딱히 없다. 개인적으로 css.Module 형태로 프로덕트 관리를 잘하지도 않기도 하고, 보통 스타일컴포넌트, StoryBook, Antd, Reactstrap 등의 라이브러리를 불러와서 css styling을 하는 것이 일반적이기 때문에 classes.action ,clsses.header 등의 설명을 자세하게 다루지는 않도록 한다. 간단하게 말하자면,  Error.css파일의 이름을 Error.module.css로 이름을 바꿔준다음에,  여기서 . 등으로 정의된 스타일링의 이름을 붙여 html 태그의 className = {classes.스타일링이름}으로 className을 지정하는 것이다. 

- backdrop: 배경을 불투명하게 가리는 역할을 하는 div 요소이며 모달 창 외부를 클릭하면 props.onConfirm 함수가 실행된다.

- Button: 확인 버튼으로 사용되는 컴포넌트이며  props.onConfirm 함수가 실행되도록 설정되어 있다. 

 

🌈 Card.js

import React from "react";
import classes from './Card.module.css';

const Card = props =>{
    //Card.module.css의 card가져오고 거기에 있는 css styling을 사용한다는 의미
    return <div className={`${classes.card} ${props.className}`}>{props.children}</div>
};

export default Card;

- 여기서도 딱히 볼건 없지만..... ${classes.card} ${props.className}을 사용하여 Card.module.css 파일에서 정의된 card 클래스와 부모 컴포넌트에서 전달된 className 프로퍼티를 결합하여 클래스를 적용해준다. 이를 통해 컴포넌트의 스타일링을 지정할 수 있다.

 

- props.children: 부모 컴포넌트에서 Card 컴포넌트로 전달된 자식 요소들을 렌더링해준다. 이를 통해 Card 컴포넌트 안에 포함된 내용을 표시할 수 있다.

 

🌈 Button.js

import React from "react";

import classes from './Button.module.css';

const Button =props =>{
    return <button className = {classes.button} type = {props.type || 'button'} onClick = {props.onClick}>{props.children}</button>
}

- 위와 마찬가지로 props를 인자로 받아오고 있음 : 부모 컴포넌트의 속성을 적용하기 위해서 

- type 속성: props.type을 사용하여 버튼의 타입을 지정해준다. props.type이 주어지지 않으면 기본값으로 'button'을 사용한다.  <Button type="submit">Add User</Button>에서의 타입을 받아오게 되는 것이 그 예시임

- onClick 이벤트 핸들러: props.onClick을 사용하여 클릭 이벤트에 대한 핸들러를 지정해준다. 이를 통해 부모 컴포넌트에서 버튼 클릭에 대한 동작을 정의할 수 있다. 

 

 

🌈 UserList.js

- props라는 객체의 users 속성에 있는 사용자 정보를 리스트 형태로 출력하는 부분임. 이때 props는 App.js를 의미한다. App.js에서 UserList.js를 임포트해오기 때문이다.

- users 배열의 각 요소에 대해 반복하며, 배열의 각 요소를 받아와서 함수를 실행합니다. 이 때, user 매개변수는 현재 반복 중인 users 배열 요소를 나타내는 것이다.  

- props.배열이름.map((배열요소이름 : 아무거나 하는데, 보통 users, elements이므로 element라고 함) => (출력형태 : {배열요소이름.속성1} {배열요소이름.속성2}...))

import React from "react";
import Card from "../UI/Card";
import classes from './UserList.module.css';



const UsersList = props =>{

    return (
        <Card className = {classes.users}>
        <ul>
            
            {props.users.map((user) =>( <li key={user.id}>{user.name} ({user.age} years old)</li>))}
            
        </ul>
        </Card>

    );
};

export default UsersList;

- {user.name}은 user 객체의 name 속성을 나타내며, 사용자의 이름을 출력한다.

- {user.age}는 user 객체의 age 속성을 나타내며, 사용자의 나이를 출력한다.

- 즉 배열 요소의 출력 형태는 {배열의 요소.속성}   이 형태로 출력해야 화면에서 출력된다. 

-  <li key={user.id}></li> : key 속성은 React에서 리스트 항목을 렌더링할 때 필요한 고유 식별자이다. 반드시 json 형태의 데이터를 불러올 때 작성해줘야 오류가 뜨지 않는다. 여기서는 user.id 값을 사용하여 각 항목을 구별한다. 

 

 

App.js

import React from 'react';
import AddUser from './components/Users/AddUser';
import UsersList from './components/Users/UsersList';
import {useState} from 'react';

const App=() =>{
    const [usersList, setUsersList] = useState([]);

    const addUserHandler = (userName, userAge) =>{
        setUsersList((prevUserlist)=>{
            return [...prevUserlist, {name : userName, age : userAge, id : Math.random().toString()}];
        });

    }
    return (
        <div>
            <AddUser onAddUser={addUserHandler} />
            <UsersList users={usersList}/>

        </div>
    )

}

export default App;