[React 완벽 가이드] section 8 : 연습 프로젝트 완료

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

97. 모듈 소개

• 연습 프로젝트 시작

98. "사용자" 컴포넌트 추가하기

• Technically, the React import is not required in all React projects as you learned. But you're never wrong with adding it. 

import React from "react";

99.  재사용 가능한 "카드" 컴포넌트 추가하기 

• 두 개의 css 클래스를 적용하는 방법 

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

const Card = (props) => {
  return (
    <div className={`${classes.card} ${props.className}`}>{props.children}</div>
  );
};

export default Card;

→ Card.module.css / 또 다른 하나는 props를 통해 잠재적으로 외부에서 들어오는 클래스 

 

100.  재사용 가능한 "Button" 컴포넌트 추가하기

• button component 추가 

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>
  );
};

export default Button;

→ props.type이 정의되지 않으면 대안으로 button 이 사용된다. 

→ handler 함수를 가져오기 위해 props.onClick를 전달한다. 꼭 이름을 onClick으로 할 필요는 없지만, 이 button이 내장된 button 처럼 사용되길 원하므로 다음과 같이 동일한 이름을 사용한다. 

 

101. 사용자 입력 State 관리하기 

• enteredUsername, enteredAge using useState 
• usernameChangeHandler, ageChangeHandler

102.  검증 추가 및 로직 재설정하기

• 입력된 나이값은 사실 숫자가 아니라 문자열이다. input에 입력되는 어떤 값이라도 항상 문자열로 반환된다. 이것이 js와 dom이 작동하는 방식이다. 따라서 여기서 입력되는 나이값은 숫자가 아닌 문자열이 된다. 

if (+enteredAge < 1) {
  return;
}

→ 일반적은 js 에서는 '+' 가 없어도 작동하지만, 좀 더 안전하게 하기 위해 + 기호를 넣어서 입력된 나이값을 숫자형으로 바꿔준다! 

103. 사용자 목록 컴포넌트 추가하기

• userList component 추가

104. State를 통해 사용자 목록 관리하기

• App.js 에 userList state를 생성

  const [usersList, setUsersList] = useState([]);

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

105. "ErrorModal" 컴포넌트 추가하기 

• ErrorModal component 추가

106.  오류 State 관리하기 

• error State 추가 

const [error, setError] = useState();

  const errorHandler = () => {
    console.log("error!!");
    setError(null);
  };

---

https://www.udemy.com/course/best-react/