[TIL]20230613 - React 프로젝트 파일 생성 오류, react jsx map/filter 함수 반환

터미널에서 새로운 폴더를 생성하고 yarn을 실행했더니

오류가 났다......?

내버전은 18.15 였는데 18.16으로 업데이트하니 오류가 해결되었다 ㅎㅎ

는 내 착각!!!!!!!!!!!!! 해결되지 않음

 

2)settings.json 파일에 코드 추가

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

실패.

3) npm 패키지 추가설치

npm i eslint-plugin-jsx-a11y

실패!

 

사실, 추가 패키지등의 설치 없이 실행되어야하는게 맞다.

아무것도 안한 프로젝트기 때문에....

 

그래서 튜터님께 여쭤보니 yarn 설치 오류등이 은근 많다고 한다.

다른 프로젝트는 잘 열린걸 보니 무언가 프로젝트생성시에 오류인듯...

프로젝트를 삭제하고 npm으로 설치하고 yarn 으로 실행하니 엄청 멀쩡히잘되는것 ^^

나의시간...............

npx create-react-app my-app

yarn start

 

git bash를 사용할때 windows는 은근히 오류가 많다

대소문자구분도 자동으로 안되고 한글도 조심해야한다.

yarn이 속도도 빠르고 보안도 좋지만 호환성이 안좋을때가 가끔있기때문에 이럴땐 npx로 설치!!

npx로 설치하고 yarn으로 실행해도 아무 문제가 없음 !!!!!!!!!!

 

---

map 함수와 filter 함수

useState를 활용해서 똑같은 컴포넌트를 여러개 생성하려했을때

궁금증 발생 !

왜 같은 배열을 반화하는 함수인데

map 함수는 바로 jsx 문법을 돌려서 반환할 수 있는데

cropArr.map((item) => {
    return <div className="crop">{item}</div>;
})

filter 함수는 map으로 한번더 돌려야 할까요?

cropArr.filter((item) => {
    return item !== '오이';
}).map((item) => {
    return <div className="crop">{item}</div>;
})

 

MDN 문서에 따르면 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

map함수는 가공된 '값'을 배열로 반환,

filter는 true/false 를 확인해서 배열의 '요소'만을 반환하기 때문이다!

 

 

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter