Daily Coding - FE 3주차 - 29강 30강 31강 32강 33강

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.log 를 찍어낼 수 있는 함수를 매개변수를 넣어 만든다

2. 부모 컴포넌트에서 만든 console.log 찍는 함수를 '자식 컴포넌트'에 내려준다

   => props를 통해서 내려준다

   => props는 값 뿐만 아니라 '함수'도 전달 할 수 있다

   => props는 부모 -> 자식 O, 자식 -> 부모 X

3. 자식 컴포넌트에서 실행을 시켜서 부모 컴포넌트 함수의 '인자'에 넣어준다.

 

 

30강 오류 해결 방법

부모 컴포넌트 -> 자식컴포넌트 전달

강의대로 하면 아래와 같은 오류가 발생한다

ERROR props.date.getFullYear is not a function TypeError: props.date.getFullYear is not a function

data: data.date 가 아니라 data: new Date(data.today) 로 해줘야 오류가 발생하지 않는다.

 

 

31강

개발 서버(dev server)

[index.html]

[bundle.js (alexa.png)] < 9.7KB : inlined

// alexa.png파일이 9.7KB보다 작아서 base64로 인코딩해서 보여주는 거임.

 

[siri.png] > 9.7KB separated files

 

이미지 크기를 조절하기

<img> 태그에서 with, heightdml 값을 조정한다.

<style> 속성에서 with, height 값으로 조절한다.

 

 

32강

리스트 추가 방법

APP.js

const getPaymentFormData = (data) => {
    console.log('data', data);
    console.log('expenses', expenses);
    setExpenses([
        {
            id: Math.random().toString(),
            title: data.name,
            amount: data.price,
            date: new Date(data.today),
        },
        ...expenses
    ]);
};

 

 

ExpenseItem.js

<button className="expense-item__del" onClick={() => props.delExpensesItem(props.id)}>Delete</button>

 

 

33강

리액트 컴포넌트를 재사용해서 map등의 함수를 여러 개를 만들 땐,

각각을 구분해 주는 unique key 값을 지정해주어야 console 내에서 error가 발생하지 않는다.