Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
fbbdc229
Commit
fbbdc229
authored
Jun 29, 2022
by
Lee Soobeom
Browse files
onClick, useState, map
parent
5b52324d
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/pages/board.tsx
View file @
fbbdc229
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
function
range
(
start
:
number
,
end
:
number
)
{
return
(
new
Array
(
end
-
start
+
1
)).
fill
(
undefined
).
map
((
_
,
i
)
=>
i
+
start
);
}
export
default
function
BoardPage
()
{
const
imgs
=
range
(
0
,
7
);
//[1,2,3,4,5,6,7]
const
ords
=
range
(
1
,
8
);
//[1,2,3,4,5,6,7];
const
[
count
,
setCount
]
=
useState
(
0
);
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"flex flex-col items-center mt-6"
>
...
...
@@ -18,18 +18,19 @@ export default function BoardPage() {
`여행지 후기를 남겨주세요!`
</
div
>
</
div
>
<
div
className
=
"flex flex-col w-10/12 mt-16 "
>
<
div
>
<
div
className
=
"bg-gray-500 border-y-2 h-10"
>
Board
</
div
>
<
div
>
{
img
s
.
map
(
img
=>
(
<
div
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid "
>
<
div
className
=
"basis-1/12 bg-gray-100"
>
{
img
}
</
div
>
<
div
className
=
"basis-full"
>
title
</
div
>
{
ord
s
.
map
(
(
ord
,
index
)
=>
(
<
div
key
=
{
index
}
className
=
"flex flex-row h-16 divide-x-2 border-2 border-solid "
>
<
div
className
=
"basis-1/12 bg-gray-100"
>
{
ord
}
</
div
>
<
div
className
=
"basis-full"
>
<
button
onClick
=
{
()
=>
setCount
(
count
+
1
)
}
>
title
</
button
></
div
>
{
/*<Link to>title</Link> */
}
<
div
className
=
"basis-3/12"
>
date
</
div
>
<
div
className
=
"basis-2/12"
>
like
</
div
>
<
div
className
=
"basis-2/12"
>
{
count
}
</
div
>
</
div
>
))
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment