차근차근 배움터

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷°을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/08-practice-project 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

모달 창을 띄우는 유무를 결정하기 위해서 state를 이용할 것이다 여기서 변수에 + 를 붙이는 것은 Number 형태로 변환하기 위함이다 에러마다 메세지를 다르게 했고 모달창에서 background 클릭시 모달 창의 에러 상태를 변경 시켜 사라지게 했다 UserForm.js import "./UserForm.css"; import { useState } from 'react'; import Card from './UI/Card'; import Button from "./UI/Button"; import ErrorModal from "./UI/ErrorModal"; const UserForm = (props) => { const [userName, setUserName] = useState(""); co..

모달 창은 가져와서 써 본적은 있는데 직접 만들어보지는 못해서 강의를 보면서 해보려고 한다 이렇게 모달창까지 완료했다! ErrorModal.js import classes from "./ErrorModal.module.css"; import Card from "./Card"; import Button from "./Button"; const ErrorModal = (props) => { return {props.title} {props.message} Okay } export default ErrorModal; ErrorModal.module.css .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; ..

사용자 정보를 출력할 것이다 내가 만든 방식과 거의 비슷! id만 그냥 Math.random().toString()으로 지정했다

UserList.js import styles from "./UserList.module.css"; // import "./UserList.css"; import Card from './UI/Card'; const UserList = (props) => { return UserList {props.userInfoArr.map((userInfo) => )} } export default UserList; css파일도 module.css 파일로 변경하여 className 에다 각각 {style.classname} 형식으로 변경해서 입력했다

form 제출 시에 input value를 초기화하기 위해서 value={enteredAge} 와 같이 코드를 작성했다 이렇게 하면 키 입력으로 변경되는 경우가 아니라 폼을 제출하는 경우에도 현재 상태의 스냅샷을 반영하는 입력 값을 가질 수 있다 이전 강의와 유사

setUserName(""); setUserAge(""); 이렇게 useState의 set 함수를 이용하여 input 값을 비우고 싶을 때는 꼭 input 태그에 value로 연결을 해야 한다 화면이 내용을 업데이트하여 반환하기 위해서! 그리고 useState에서는 string 형태로 받기 때문에 age는 number 형태로 바꾸는 것이 더 정확할 것이다

button의 타입도 지정할 수 있다 import styles from "./Button.module.css"; const Button = (props) => { return {props.children} } export default Button; Add User

재사용 가능한 Button을 만들어 보았다 Button.js import styles from "./Button.module.css"; const Button = (props) => { return {props.children} } export default Button; {props. Children} 을 통해서 컴포넌트 내에 입력한 값을 가져오고 styles.btn 부분을 통해서 class로 btn 을 지정 그리고 props.className을 통해 기존 컴포넌트에 있던 class가 있다면 가져온ㄷ Button.module.css .btn { background-color: purple; margin: 0.7rem 0; width: 35%; color: #fff; box-shadow: 2px 2px ..

선생님이 올려주신 프로젝트를 다운받고 1) npm install 하고 npm start를 하면 빈 화면을 볼 수 있다 이름과 나이가 들어간 컴포넌트가 필요하다 오류 모달창이 보이는 컴포넌트도 필요할 예정이다 2) 버튼 같은 일반적인 UI를 담을 UI 폴더를 생성한다 ※ JSX 코드를 사용하고 싶을 때 React를 import 한다 AddUser.js import React from "react"; const AddUser = (props) => { const addUserHandler = (event) => { event.preventDefault(); } return UserName UserName } export default AddUser;