2023.08.22(화) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week1 Day 2 보고

• TO-DO LIST

- 29강 리액트 상태 - 5 - Form 제출 ~ 33강 리스트 렌더링 - 2 - key

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

event.preventDefault()

해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우

​

1. a 태그 클릭 시 href 링크로 이동
2. form의 submit을 누르면 새로 실행이 됨

​

Two-way binding

만약 form을 제출하고 값을 모두 초기화 해주고 싶다면?

1. Input에 상태를 value 속성으로 넣어준 후
2. 제출을 한 후에 상태를 초기화 해주면
3. Value에 초기화된 상태가 반영되어 UI에 업데이트

​

const buttonSubmitHandler = (event) => {

event.preventDefault();

console.log(objectState); // 콘솔창에 제출

​

setObjectState({ // 상태 초기화

name: "",

price: 0,

today: new Date(),

});

};

​

자식 컴포넌트에서 부모 컴포넌트로 상태 올리기

: 부모 컴포넌트에서 함수를 만들어서 props를 통해 전달해 주어야 한다.

​

부모 컴포넌트의 상태를 자식 컴포넌트로 전달하기

: 업데이트된 상태를 자식 컴포넌트로 전달해 주어 ui가 자동으로 업데이트해서 변화를 반영할 수 있게 한다.

​

- 이미지 가져오기

jpg, jpeg

높은 압축률, 픽셀 기반

이미지 퀄리티가 손상될 수 있음(Lossy)

수천 가지 팔레트 색

로고, 라인 X

​

png

손실 없이 이미지 압축(Lossless)

W3C 권장 표준

간단한 배너 이미지

​

svg

2차원 벡터 그래픽

해상도 상관 없이 이미지 품질 좋음

복잡한 이미지 X

​

이미지 파일의 크기가 1000B(9.7kb) 기준으로 큰지 작은지에 따라 이미지 파일을

브라우저에서 처리하는 방식이 달라진다.

< 9.7kb : inlined 인코딩 통해 스트링으로 전환됨

> 9.7kb : seperate files 별도의 파일로 개발 서버에서 가지고 있다가 보여줌

​

<리스트에서 삭제하는 방법 두 가지>

- filter method

const newFilteredArray = expenses.filter(item => item.id !== id);

'삭제하기' 버튼 누른 객체?의 id와 일치하지 않는 것들은 그대로 남겨 놓고 보여줌

(일치하는 id만 삭제)

setExpenses(newFilteredArray);

​

- slice method

begin부터 end까지 (end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

index 값을 받아서 사용해야 함

const beforeArray = expenses.slice(0, index);

const afterArray = expenses.slice(index+1);

setExpenses([...beforeArray, ...afterArray]);

index 뺴고 index - 1과 index + 1을 연결해주는 개념!

​

어떤 값을 받을 수 있는지에 따라 취사 선택 ! !

(id or index)

​

부모 컴포넌트의 state를 자식 리스트 컴포넌트에 연동하면 해당 리스트에 값이 추가되고

삭제가 될 때마다 바로 화면이 업데이트 된다.

​

- 리스트의 key

"Warning: Each child in a list should have a unique "key" prop."

mapping을 통해 만들어진 div 요소들이 있는데, 그 요소들이 구분되지 않기 때문?

-> 불필요한 렌더링, 리소스 낭비

​

리액트에서 리스트 형태로 만드는 모든 컴포넌트(HTML tag, 커스텀 컴포넌트 등)에 대해서

key 값을 고유하게 부여해 주어야 에러가 발생하지 않는다. (unique key)

각각의 컴포넌트를 구분해서 요소가 추가되더라도 불필요한 리렌더링을 막을 수 있다.

id값 사용 가능!

​

• 부족한 점

​

• 스스로 시도해본 것들

안 그래도 강사님 코드를 따라 쳤을 때 key 관련 오류가 뜨길래 구글링을 해봤다.

key = {index}를 넣어줬더니 해결됐다.

참고: https://crong-dev.tistory.com/47

[Warning: Each child in a list should have a unique "key" prop.] 에러 해결

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고

이틀 노니까 쫙 밀려버린 강의 ~.~

이번주는 참 집중이 안 된다.. 그래도 해야지 어떡해?