spread
search라는 객체를 만들고 그것을 이벤트를 통해 업데이트 시키기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const [search, setSearch] = useState({
type: "clickMap",
radius: "20000",
});
<Select
defaultValue="20000"
onChange={(value) => {
search.radius = value;
setSearch({ ...search });
}}
style=
value={search.radius}
>
<Option value="5000">5km</Option>
<Option value="10000">10km</Option>
<Option value="15000">15km</Option>
<Option value="20000">20km</Option>
</Select>
<Select
defaultValue="주소"
onChange={(value) => {
search.type = value;
setSearch({ ...search });
}}
style=
value={search.type}
>
<Option value="clickMap">지도 위 클릭하기</Option>
<Option value="address">주소로 찾기</Option>
<Option value="keyword">캠핑장 이름으로 찾기</Option>
</Select>
-
select를 통해서 type과 radius를 받는다.
-
onChange에는 search의 radius와 type을 각각의 value값으로 바꿔주고 setSearch에 {…search}를 전달한다.
-
만약 setSearch(search)로 쓴다면 화면이 다시 렌더링되지 않기 때문이다. 값을 바꿨을 때도 인식하지 못하기 때문이다.
-
…search는 object를 복사하는 개념이라 다른 object로 인식되어 다시 렌더링된다.
