map3 React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size 우리는 보통 데이터를 담는 그릇 (a.k.a 자료구조) 으로 객체나, 배열을 많이 사용한다. 하지만 사용하다 보면 여러가지 형태의 자료구조가 필요하다. 그중 하나인 맵(Map) 을 알아보자. 객체 – 키가 있는 컬렉션을 저장 배열 – 순서가 있는 컬렉션을 저장 맵(Map) 이란 일단 겉 모습은 객체랑 비슷하다. 쉽게 말해 커스텀이 가능한 객체 느낌이다. 키-값 쌍을 저장하며 각 쌍의 삽입 순서를 기억한다. 또한 Map 은 함수, 객체 등을 포함한 모든 값을 키와 값으로 사용할 수 있다. 일반적인 object 는 순서를 기억하지는 않는다. 리액트에서 맵(Map) 사용하기 1. new Map() – 맵 만들기 (리액트에서는 useState 로 맵을 선언했다.) // useState 로 타입이 맵인 변수 ar.. 2022. 2. 4. React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14. React 실행오류 Cannot read property 'map' of undefined Updated 2022/10/07 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터를 화면에 뿌려주려 하다가 이런 에러메시지가 나왔다. 문제상황) TypeError: Cannot read property 'map' of undefined 왜 나에게 이런일이... ?? 먼저 코드를 살펴보자 const [articles, setArticles ] 로 = useState() 의 뉴스 기사(데이터) 를 관리할 상태를 선언해준다. useEffect() 내부에서 fetchEvents() 를 선언하여 비동기 작업(통신)을 한다. (네이버 서버에서 코로나 관련 뉴스만 긁어오는 역할) setArticles( 안에 fetchEvents()에서 반환된 data를 ) 매개변수로 넣어 articles 의 데이.. 2021. 2. 12. 이전 1 다음 반응형
