버튼 클릭시에 랜더링을 껏다 켰다 할수 있게 구현해보기
"조건부랜더링"
이번 기능에서 중요한것은 , 논리연산자 논리곱(AND, &&)를 이용하는것이다.
location_search.tsx
import { TextField,Stack} from "@mui/material";
const Location_search:React.FC = () => {
return(
<div>
<Stack sx={{flexDirection:'column'}}>
<TextField sx={{width:500}}>A동</TextField>
<TextField>B동</TextField>
<TextField>C동</TextField>
<TextField>D동</TextField>
</Stack>
</div>
);
}
export default Location_search;
버튼을 클릭시 나타날 컴포넌트를 만들어주었다.
App.tsx
// ./ 의 위치: frontend/src/
// ../의 위치: frontend/
import React from 'react';
import './App.css';
import { Route, Routes } from 'react-router-dom';
import Location from './pages/user/location';
import Location_search from './pages/user/location_search';
import axios from 'axios';
axios.defaults.withCredentials = true;
const App: React.FC = () => {
return (
<Routes>
<Route path='/location' element={<Location/>} />
<Route path='/location_search' element={<Location_search/>} />
</Routes>
);
}
export default App;
그리고 App.tsx에 필요한 path설정을 해준다.
location.tsx
import {Stack,Typography,Box,Button,TextField,InputAdornment} from '@mui/material'
import GpsFixedIcon from '@mui/icons-material/GpsFixed';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import Location_search from './location_search';
const Location:React.FC = () => {
const navigate = useNavigate();
const [visible, setVisible] = useState(false);
return (
<div className="location">
<Typography sx={{fontSize:32 , pb:3,textAlign:'center'}}>회원가입</Typography>
<Box sx={{display:'flex', justifyContent:'center', alignItems:"center"}}>
<Stack direction="row">
<TextField type="text" placeholder="동명(읍,면)으로 검색 (ex. 서초동)" sx={{ backgroundColor:"#F5F5F5", width:500}}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<LocationOnIcon sx={{color:'#FF7474'}}/>
</InputAdornment>
),
}}
/>
</Stack>
</Box>
<Box sx={{display:'flex', justifyContent:'center',alignItems:'center',flexDirection:'column'}}>
<Button onClick={()=> {setVisible(!visible)}}startIcon={<GpsFixedIcon/>} sx={{color:'white', backgroundColor:'#FF7474', width:500,mt:2}}>
{visible? '현재위치로 찾기' : '현재위치로 찾기'}
</Button>
{visible && <Location_search/>}
</Box>
</div>
)
}
export default Location;
현재 위치로찾기 라는 버튼을 클릭시에 화면에 랜더링되게 하기위해서
location.tsx 컴포넌트를 만들고,
const [visible, SetVisible] = useState(false);
useState를 false로 지정하여 기본값이 false이고 화면에는 location_search 컴포넌트가 랜더링되지않는다.
그리고 Button클릭 시 setVisible(!visible)을 설정해준다.
이렇게되면 기본값 false의 반대인 true값 즉 setVisible(true)형태로 설정된다.
{visible? '현재위치로 찾기' : '현재위치로 찾기'}
은 visible이 true든 false든 버튼은 똑같이 보이게하기위해 이렇게 설정해주고,
{visible && <Location_search/>}
"조건부 랜더링" 이라는 리엑트의 개념을 사용해준다.
visible값에 따라 <Location_search/>화면이 랜더링 되거나 되지않게된다.
자바스크립트 &&연산자(논리곱 AND)는 좌항과 우항이 모두 참일때만 true를 반환한다.
여기서는 visible 값이 true일때만 <Location_search/> 컴포넌트가 생성되고 랜더링된다.
클릭전- visible(false)
클릭 - visible(true)
참고출처