전체 글

39강React Devtool=> chrome Extention을 통해 설치한다components: 컴포넌트를 트리 상태로 보여주는 툴 40강디버깅 Part 2.- React Devtool (Chrome Extension)Componets : 컴포넌트를 드리 구조로 보여주며 상태 정보를 확인 할 수 있다Profiler : 렌더링된 컴포넌트를 소요 시간과 함께 보여준다 - Google Lighthouse구글에서 만든 Profiler이며 profiling만 하기 위해서 만든 전문적인 tool이다.웹페이지에 퀄리티를 개선시키기 위해 만들어진 tool이며 어떤 웹에서도 모두 사용이 가능하다.SEO와 같은 지표도 확인이 가능하다.크롬을 사용하면 별도 설치가 필요없다.https://github.com/Febase/..

35강동적인 인라인 스타일링빈 Input으로 값을 입력하면 배경색이 빨강으로 바뀐다. trim : removes the leading and trailing white space and line terminator characters from a string// 공백도 빈 메서드로 인식하게 만들어 줌.import React, { useState } from 'react';import Button from '../../UI/Button/Button';import './CourseInput.css';const CourseInput = props => { const [enteredValue, setEnteredValue] = useState(''); const [isValid, setIsValid] = u..

34강리스트 필터링리스트에 필터를 걸어주기 위해서는 state로 조건을 가지고 있고, filter() 메서드를 사용해서 매번 state가 바뀔 때마다 업데이트 해준다.컴포넌트가 바뀔때마다 리랜더링이 발생한다.import React, {useState} from 'react';import ExpenseItem from "./ExpenseItem";import Card from "../UI/Card";import "./Expenses.css";import ExpensesFilter from './ExpensesFilter';const Expenses = (props) => { const [filteredYear, setFilteredYear] = useState('2023'); const filterCha..

29강 event.preventDefault()- 해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 막고 싶은 경우 사용한다.ex) a 태그 클릭 시 href 링크로 이동하는 걸 막을 때      form submit을 누르면 새로 실행이 되는걸 막을 때 Two-way binding- 제출한 form의 값을 모두 초기화 해주고 싶을 때 하기와 같이 진행한다.1. input에 상태를  value 속성으로 넣어준다2. 제출 후 상태를 초기화 한다3. value에 초기화 된 상태가 반여되어 UI를 업데이트 한다  30강자식 컴포넌트에서 부모 컴포넌트로 상태 보내는 방법=> 부모 컴포넌트 console.log()에서 자식 컴포넌트 form data 찍어보기  1. 부모 컴포넌트에서 console.lo..

// HTML Sign up Page ID Password Password ..