0816 react

react boiler proj

boiler plate

vsc 똑같은 문자열 전체 선택 ctrl alt L

배열정렬 함수 https://heytech.tistory.com/216

(function()) : 즉시실행
(()=>(function())) : 비동기실행(콜백함수), 어떠한 행위를 거쳐야만 실행

1. my-items

const handleNewest = () => {
    const newestItem = [...items].sort((item1, item2) => item2.createdAt - item1.createdAt);
   
    setItems(newestItem);
  }

ㄴ 배열함수 sort는 기존의 원본배열을 변경하는 함수임으로 ...스프레드 문법으로 새로운 객체를 생성하여야 한다.

state값을 변경하기 위한 set함수는 같은 값에서는 재렌더를 일으키지 않음,
고로 새로운 객체가 있어야 set함수 반응

----> 이런 이유로 투두리스트 수정이 안된걸까

const handleFileChange = (e) => {
    console.log(e.target.files)
}

e.target.files을 통하여 파일리스트로 접근

<input 
      type='file'
      onChange={handleFileChange}
/>

file객체도 하나의 객체정보로 들어갈 수 있도록 해야한다.

css module

https://github.com/css-modules/css-modules

-> styled-components 보다 성능적으로 빠름
스타일 컴포넌트 사용시 className으로 설정 -> 인라인스타일과 같은 형식, 성능적으로 좋은 방법은 아닌다, 스타일 컴포넌트 사용시 컴포넌트별로 스타일적용하는 것을 권장(속도

스타일드 컴포넌트
: props를 자유롭게 사용할 수 있다,,

classnames란 npm 모듈도 존재~!

https://github.com/css-modules/css-modules
https://www.npmjs.com/package/classnames

jsonformatter
https://jsonformatter.curiousconcept.com/

비동기
fetch, axios에 대한 복습 필요