[ #6 ] setState & conditional content
1. useState 를 사용하는 방법.
기존코드
const[expenses, setExpenses]=useState(initial_expenses)
const addExpenseHandler = (expense) => {
temp = [{
...data,
expense,
}]
setExpenses(temp);
}
함수 useState()는 현재값과, setExpenses라는 값을 변경하는 메소드를 반환하는줄 알았고, setExpenses(바꿀값) 을 통하여
값을 직접 변경할 수 있는정도로만 알고있엇다.
useState의 두번째 반환값 s...
[ #5 ] state의 역행 childretn -> parent
1. props의 역행
state는 top down 방식으로 이동 할 수 있는 줄 알았지만 아니었다. 부모 컴포넌트에서 함수를 선언한다음 자식 컴포넌트에 함수에대한 포인터를 전속하는 방식으로 자식 -> 부모에게 데이터 전송이 가능하다.
자세한 내용은 코드를통해 알아보도록한다.
import React, { useState } from "react";
import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import ExpensesFilter from "./ExpensesFilter";
import "./Expenses.css";
co...
[ #4 ] useState 사용하는 방법
useState 를 사용하는 방법
방법 1. 여러개의 단일 useState 사용하기.
const [enteredTitle, setEneteredTitle] = useState("");
const [enteredAmount, setEnteredAmount] = useState("");
const [enteredDate, setEnteredDate] = useState("");
const titleChangeHandler = (event) => {
setEneteredTitle(event.target.value);
};
const amountChangeHandler = (event) => {
set...
[ #3 ] useState 사용해보기
Title을 바꿔봅시다.
왜 제목이 안바뀔까요~
//ExpenseItem.js
import React, { useState } from "react";
import ExpenseDate from "./ExpenseDate";
import Card from "../UI/Card";
import "./ExpenseItem.css";
const ExpenseItem = (props) => {
const title = props.title;
const clickHandler = () => {
title = "Clicked!"
console.log("You definitely clicked!...
[ #2 ] Props.children 과 커스텀 컴포넌트(태그)
1. props.children & custom tag
컴포넌트를 호출할때 각각의 변수정보또한 같이 보내게 된다. 이는 하나의 객체안에 담겨서 넘어가게되는데
이때 children 이라는 정보든 따로 넘겨주지 않아도 기본적으로 전달되는 정보이다.
본글에서는 Card.js 라는 wrapper 컴포넌트를 만들면서 자세히 설명하도록 하겠다.
Expenses.js
import React from "react";
import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card"
import "./Expenses.css";
const Expenses = ...
[ #1 ] Props란?
1. props
오늘은 props 에 대하여 배웠다.
custom component에 값들을 전송할때 해당 태그안에 객체이름=value식으로 보낼 수 있으며
해당 컴포넌트에서는 보내어진 모든 객체들을 하나의 객체안에 몽땅 넣어서 전달한다.
Card.js 라는 Wrapper 컴포넌트를 만들면서 자세히 설명하도록 하겠다.
App.js
ExpensesItem 으로 expenses 객체 전달하기.
import ExpenseItems from "./components/ExpenseItems";
import './App.css';
function App() {
const expenses = [
{
...
전체 글 38개, 5 페이지