Map

React : 불변성 유지하기 (concat, slice)

배열을 직접적으로 수정하는 메소드 pop, push, shift, unshift, splice 등등.. 얘들은 불변성 유지 때문에 리액트에서 거의 쓰면 안된다. 만약 쓰려면 immer 라이브러리를 이용하면 된다. 새로운 배열을 만드는 메소드 concat, slice, map, filter, reduce, 얘들은 써도 된다. map(): 배열의 모든 요소를 순회하면서 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성한다. filter(): 주어진 조건을 만족하는 배열 요소만으로 새로운 배열을 생성한다. reduce(): 배열의 각 요소를 순회하면서 주어진 함수를 적용하여 하나의 결과값을 얻는다. concat(): 기존 배열과 다른 배열(또는 값)을 합쳐서 새로운 배열을 생성한다. slice(): ..

React : 최근 본 상품 만들기 (localStorage, map, JSON)

조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //..

React : map 사용해서 div 반복생성하기

map의 기능 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); console.log(newArray) map은 array의 자료개수만큼 코드를 반복실행한다. 파라미터를 각 자료로 가진다. return 우측의 코드를 array에 담고 map 쓴 자리에 남겨준다. map 사용해서 div 반복생성하기 array자료인 state도 array.map으로 활용할 수 있다. (array 개수만큼 반복생성된다) function App (){ let [title, sortTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return (..

[드림코딩] 유용한 배열(array) api (2) : filter, map, some, every

class Coder { constructor(name, age, enrolled, score) { this.name = name; this.age = age; this.enrolled = enrolled; this.score = score; } } const coders = [ new Coder('A', 29, true, 45), new Coder('B', 28, false, 80), new Coder('C', 30, true, 90), new Coder('D', 40, false, 66), new Coder('E', 18, true, 88), ] filter enrolled가 true인 코더만 골라 새로운 배열을 만들어보자. const result = coders.filter((coder) => co..