김코드의 웹디자인 세상

👇👇👇 이전글 바로가기👇👇👇 『 2023.03.16』- 미세먼지 마지막 영역과 로딩화면 만들기! 👇👇👇 이전글 👇👇👇 『2023.03.15 』- css 전면 수정?! (module.css) 👇👇👇 이전글 👇👇👇 『2023.03.14』 - 가이드라인 제작 및 css다듬기 👇👇👇 이전글 👇👇👇 https://y-seon97.tistory.com/78 안 y-seon97.tistory.com 드디어 모든 영역을 만들었습니다. 이제는 데이터를 연결해 주기 전 전처리의 작업을 진행해야 합니다. 지도 부분에서의 지역데이터를 읽고 옆에 상태창에 뜨게 만들어야 하는데요! 그럼 먼저 일단 지도 부분에 지역 data값을 입력해 주도록 하겠습니다. (*ˊᵕˋ*) ﾉ 일단 Koreamap.js파일을 불러왔습니다. 해당 파일은..

react에서 동적값으로 상태관리를 할때 사용하는 useState. 근데 이 useState의 경쟁자가 있다고 합니다. 바로 useReducer입니다. 이 Hook 함수는 useState의 대체함수로써 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다는 장점이 있습니다. 전에 만들어 둔 counter.js 컴포넌트 파일을 가지고 useReducer을 적용해 보도록 하겠습니다. ✏ counter.js import React, {useState} from "react"; const Counter = () => { const [num, setNumver] = useState(0..

✏ useState란?? useState는 리액트에서 동적으로 변경되는 값, 즉 동적값(State)의 상태를 처리하기 위해 사용하는 함수입니다. 복잡하고 상태관리를 할 수 없어 유지보수가 어렵던 클래스형 컴포넌트에서 유지보수가 편리한 함수형 컴포넌트로 관리하기 위해 리액트 16.8v Hooks에서 도입된 기능입니다. ✏ 사용법 리액트 패키지에서 useState를 불러와 줍니다. const [num, setNumber] = useState(0); useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 👉 0 그럼 이 함수를 호출해주면 배열이 반환되는데요, 여기서 첫번째 원소는 현재 상태 👉 num 두번째 원소는 Setter 함수입니다. 👉 setNumber ✏ Counter.j..