🚩CityButton components

- current 버튼

<button 
	onClick={() => handleCityChange("current")}
	className={`${selected === "current" ? "selected" : ""}`}>
		CURRENT LOCATION
</button>

- city 버튼

{cities.map((city, idx) => (
	<button
		key={idx}
		onClick={() => handleCityChange(city)}
		className={`${selected === city ? "selected" : ""}`}>
			{city.toUpperCase()}
	</button>
))}

→ handleCityChange를 props로 전달 받는다.

함수 인자로는 city 와 current 를 넘겨준다.

함수 인자를 city와 current 로 나누는 이유는 current는 cities 배열에 포함되어 있지 않아서 map함수로 돌릴 수 없기 때문이다.

같은 함수를 쓰고 인자에 따라 조건을 붙여주면 나눠서 동작할 수 있다.

🚩App.js

const [city, setCity] = useState(null);
const [selected, setSelected] = useState("current");

const handleCityChange = (city) => {
	if (city === "current") {
		setCity(null);
    setSelected(city);
  } else {
    setCity(city);
    setSelected(city);
  }
};

→ 눌린 버튼이 current인지 city인지 구별하기 위해 city, setCity의 useState를 만들었고, 눌린 버튼이 어떤 버튼인지 구별하기 위해서

→ const [city, setCity] = useState(null);

눌린 버튼이 current인지 city인지 구별하기 위해서 비어있는 useState를 만들었다.

→ const [selected, setSelected] = useState("current");

눌린 버튼이 어떤 city버튼인지 구별하기 위해 useState를 만들었고,

초기값은 current를 넣어 페이지가 맨 처음 열렸을때 current 버튼에 active가 작동하도록 만들었다.

🚩 App.css