본문 바로가기
반응형

React22

[React] 종속성배열 [] useEffect(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().length > 6 ); },[]); ... 이렇게 있는 경우 [] 종속성 배열때문에 앱이 시작될 때 한번만 실행된다. 종속성 변경이 되는 경우에 use Effect를 실행한다. 종속성배열때문에 로그인 버튼이 아래와 같이 활성화 되지 않는데 종속성 배열을 제거해주면 위와 같이 다시 누를 수 있게 변경이 된다. useEffect(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().length > 6 ); },[enteredEmail, enteredPassword]); .. 2021. 9. 1.
props, value, map import React from "react"; import ChartBar from "./ChartBar"; import "./Chart.css" const Chart = props => { return ( {props.dataPoints.map((dataPoint) => ( ))} ); }; export default Chart; map을 사용해서 every single data => in to the Chartbar로 나중에 dataPoint를 정의할 때 모든 dataPoint에는 value 값이 있다. 따라서 해당 data요소는 value 값이 있는 개체이다. key값은 id가 있는 경우는 위의 방식과 같이 써도 되지만 없다면 index로 줘도 됨. 2021. 8. 31.
props란? Props란? properties 의 줄임말로써 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있습니다. props 는 객체 형태로 전달됩니다. import React from 'react'; import Expenses from './components/Expenses/Expenses'; const App = () => { const expenses = [ { id: 'e1', title: 'Toilet Paper', amount: 94.12, date: new Date(2020, 7, 14), }, { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) }, { id: 'e3', title: 'Car Ins.. 2021. 8. 25.
[항해99] React 기본강의 1주차 숙제 import React from "react"; import './App.css'; import 이름 from "./이름"; class App extends React.Component{ constructor(props){ super(props); this.state = {}; } render () { 잊지말자 class 기본 구조 import React from "react"; import img from "./사진이름.png"; const Quiz = (props) => { return ( 위에 import 시킨 사진가져오기 어렵지만 재밌었다 !!!!!!!!!!!!!!!!!!!!!! 나중에는 강의도움 안받고 혼자 완벽하게 다 해봐야지 2021. 6. 25.

티스토리툴바