차근차근 배움터

사용자 정보를 출력할 것이다 내가 만든 방식과 거의 비슷! 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;

위와 같이 입력하고 아래와 같이 올바르지 않은 값을 입력했을 때 모달창이 뜨게 끔 만들어보기 모달창 빼고 과제 완료 alert 로 대신했다 (일단 ... ) 추후에 다시 모달 창 만들어 보는 것으로 이번 과제는 배운 것들을 복습할 수 있었던 좋은 과제였다 특히 자손들 간에 직접적으로 데이터를 주고 받을 수 없다는 점을 다시 인식할 수 있었다 User 내부에 UserForm 컴포넌트와 UserList 컴포넌트를 넣어서 이용했다 User.js import UserForm from './UserForm'; import UserList from './UserList'; import Modal from './Modal'; import { useState } from 'react'; const User = () =..

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

리액트 개발자 도구를 알아보자 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2468a8735 on 5/19/2023. chrome.google.com 파이어폭스에서도 가능하지만 크롬에서 사용할 것을 강력하게 추천한다 간단하게 설치 완료 설치하게 되면 Components와 Profiler라는 탭을 갖게 된다 위의 컴포넌트에서는 리액트 컴포넌트만 볼 수 있다 useState가 리액트 훅이고, 리액트 개..