undefined
์ผ ์๋ ์๋ค๋ ์ค๋ฅ๊ฐ์ด ์์ ์๋ ์๋ค
์ผ์ ์์ธ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ค์ผ ํ๋ ๊ณผ์ ์
ํ์
์๋ฌ๋ก ๊ฑฐ์ 3์๊ฐ์ ๋ณด๋๋ค.
ํ์
๊ฐ๋๋ ์๋ํด ๋ดค๊ณ
ํ์
์ง์ ๋ ํ๋๋ฐ ๊ณ์ ์ด๋ฃจ์ด์ง์ง ์์์๋ค..
undefined
์ผ ์๋ ์๋ค๋ ์ค๋ฅ๋
๊ฐ์ด ์์ ์๋ ์๋ค๋ ๋ป์ด๋ค.
<article>
{courseData && destinationList && (
<ScheduleMapDetail
destinationList={destinationList}
title={courseData.courseTitle || ''}
text={courseData.courseContent || ''}
courseDday={courseData.courseDday || ''}
/>
)}
</article>
courseData.courseTitle || ''
์ ์ต์
๋์ฒด์ด๋์ ํด์ค ํด๊ฒฐ ํ ์ ์์๋ค.
์ ์ผ ํฐ ๋ฌธ์ ๋
ํ์
์ ์ ์ธ์ ์ง์ ํด ์คฌ๋๋ฐ ์๊พธ ๋ค๋ฅธ ํ์
๊ณผ ๋น๊ต๋ฅผ ํ๋ค.
์๊ณ ๋ณด๋ ํด๋น ๊ฐ์ ๋ชจ๋ ๋์ผํ ํ์
์ผ๋ก ์ง์ ํด ์ฃผ์ด์ผ ํ๋ค.
export type PostReadT = {
courseData: {
courseDday: string;
courseTitle: string;
courseContent: string;
coureThumbnail: string;
courseThumbnail: string;
};
destinationList: IScheduleListItem[];
};
๋ง์ฝ PostReadT์ผ๋ก ํ์
์ ์ง์ ํด ์ฃผ์๋ค๋ฉด
props๊ฐ ๋ฑ ๋ชจ๋ ๊ฑธ PostReadT์ผ๋ก ์ง์ ํด ์ฃผ์ด์ผ ํ๋ค.
๊ฐ์ฒด ํ์์ผ๋ก ์ด๋ฐ์๋ PostReadT.courseData
์ผ๋ก ์คฌ๋๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
๋ค๋ฅธ ๋ฐฉ์์ธ PostReadT['courseData']
์ผ๋ก ํ์
์ ์ง์ ํ๋ ๊น๋ํ๊ฒ ํด๊ฒฐ ํ ์ ์์๋ค.ใ
const scheduleDetailSlice = createSlice({
name: 'scheduleDetail',
initialState,
reducers: {
getCourseData(state, action: PayloadAction<PostReadT['courseData']>) {
state.courseData = action.payload;
},
getDestinationList(state, action: PayloadAction<IScheduleListItem[]>) {
state.destinationList = action.payload;
},
},
});
ํค๋๊ฐ ์๋ ๊ณณ, ์๋ ๊ณณ์ด ์๋ค.
์ด๋ฐ์๋ location.pathname
๋ฅผ ์ด์ฉํด ๊ฒฝ๋ก๋ฅผ ํ์ธํ๋ค.
์๋ฅผ ๋ค์ด /register
๊ฒฝ๋ก๋ก ๋ค์ด์ค๋ ๊ฒฝ์ฐ ํค๋๋ฅผ display: none
์ผ๋ก ํ๋ค.
ํ์ง๋ง ํ์ด์ง๊ฐ ๋์ด๋๋ฉด์ /register/detil/11
์ด๋ฐ์์ผ๋ก ๋ค์ด์ค๋ฉด ํด๊ฒฐ์ ํ์ง ๋ชปํ๋ค...ใ
useParams
๋ฅผ ์ฌ์ฉํด ๋ดค์ง๋ง useParams
๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด
Routes
๋ด๋ถ์ ๋ค์ด๊ฐ์ผ ํ๋๊ฑฐ ๊ฐ๋ค...
location.pathname.split('/')[1];
/register/detil/11
์ธ ๊ฒฝ์ฐ register
๊ฐ๋ง ๋ฐํํ๋ค.
display: ${(props) => (props?.isPath === 'register' ? 'none' : 'flex')};
๋๋ถ์ ๋ฐ๋ก ๋ก์ง ์์ฑ ์์ด ํธํ๊ฒ ์์ ํ ์ ์์๋ค.
๊ณ ๋ง๋ค bard..!
๊ทธ๋ ๊ฒ ์์ฑ!ใ ใ .. ํ๋ค๋ค..ํด
์์ง ๋ง์.. ๋ฌธ์์ด์ ์ ์ฌ ๋ฐฐ์ด...๐ฅน
ํ์
์คํฌ๋ฆฝํธ๋ก ์งํํ๋ ํ์
์ค๋ฅ๋ก ์ธํด
์์
ํ๋ ์๊ฐ ๋ณด๋ค ์ค๋ฅ ํด๊ฒฐํ๋ ์๊ฐ์ด ๋ ๋ง์๋ค.
์ด๋ฒ ๊ธฐํ๋ฅผ ํตํด ํ์
์ ์ง์ ํ ๋ ์ ์ธํ ํ๋์ ํ์
์ผ๋ก props๊น์ง ์ฒ๋ฆฌํด์ผ ํ๋ค๋ ์ ๊ณผ ๋ง์ฝ ๊ฒฝ๋ก์ ๋ฐ๋ผ ํค๋ ์ ๋ฌด๋ฅผ ํ๋จํ ๋
location.pathname
๊ณผ location.pathname.split('/')[1]
๋ฅผ
์ฌ์ฉํ๋ฉด ๋๋ ์ ์ ์๊ฒ๋ ๊ณ๊ธฐ๊ฐ ๋์๋ค.
์๋ ํ์ธ์. ์ฝ๋ ์คํ ์ด์ธ ๊ด๋ จ ๊ถ๊ธํ ์ ์ด ๋ช ๊ฐ์ง ์์ด์ ๋ค์ด๋ฒ ๋ฉ์ผ๋ก ๋ฌธ์ ์ฐ๋ฝ ๋๋ ธ์ต๋๋ค 'ใ ก'
ํ๋ก์ ํธ ๋ง๋ฐ์ง์ด์ค ํ ๋ฐ ํ๋ด์๊ณ ๋ง์ง๋ง๊น์ง ํ์ดํ ํ์๊ธธ ๋ฐ๋ผ๊ฒ ์ต๋๋ค!!