버튼으로 상태 관리 하기

 

버튼을 누를 때마다 해당 값에 알맞는 JSON 데이터를 가져와서, 원하는 자리에 채워넣고 싶음

 

 

+) 참고로 JSON 형식 지켜가면서 하기..

https://jsoneditoronline.org/#left=local.mateyi&right=local.qagaku

JSON Editor Online: JSON editor, JSON formatter, query JSON

 

 

버튼마다 useState를 만들어서 (ex. buttonstate1, buttonstate2, ...) 관리한다? -> X

 

 

 

import data from './reviewItem.json'; //json 데이터 뺌

const[currentGu,setCurrentGu] = useState();
const[json,setJson] = useState();

 

1. '구'를 저장하는 state

2. '구'에 해당하는 'json data'를 저장하는 state

 

두개가 필요함!

 

 

 

useEffect(()=>{
    setJson(data[currentGu])
    console.log(json)
},[currentGu])

useEffect는 currentGu가 바뀔 때마다 실행되는 함수임. ([currentGu]말고 [] 만 넣었으면 처음 한번만 실행 된다.)

누를 때마다 데이터가 들어가고, data[currentGu]처럼 구를 특정하고,

그에 맞는 데이터가 setJson(data[currentGu])를 통해 담긴다.

 

 

data가 array형식으로, 0번째에 저장되어있는 상태이기 때문에

이 중에서 필요한 것들을 꺼내쓰면

 

<button>{json[0].name}</button>

 

다음과 같은 형식이다.