-
글쓴이글
-
2021년 3월 29일 15:30 #7621
김인구참가자map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 에서 따봉 개별 적용 질문입니다.
아무리 짱구를 굴려봐도 map을 사용하고 각자 따봉을 활성화 시키는 방법이 안떠올라서요..
처음엔 따봉스테이트를 배열로 만들어서 하려니 이모티콘옆에 표기되는 숫자가 000으로 뜨고...
잘모르겟습니다ㅜ 선생님 답지 보고싶습니다
2021년 3월 29일 19:18 #7632
codingapple키 마스터일단 갯수를 각각 저장해놔야하니까 배열자료를 만들어두는게 맞습니다
let [따봉, 따봉변경] = useState([0,0,0])
그 후엔 map 이런거 생각하지 마시고 하드코딩으로 버튼을 세개 만들어봅니다.
그리고 버튼을 클릭했을 때 뭔가 코드를 실행시키면 되는데
<button onClick={()=>{ }}>
0번째 따봉버튼을 누르면 따봉[0]에 +1 해주고 그걸 따봉state에 반영하라고 코드를 짭니다
1번째 따봉버튼을 누르면 따봉[1]에 +1 해주고 그걸 따봉state에 반영하라고 코드 짭니다
2번째 따봉버튼을 누르면 따봉[2]에 +1 해주고 그걸 따봉state에 반영하라고 코드 짭니다
그리고 그 후에 버튼들을 map으로 축약해보는건 어떨까요
2021년 3월 29일 21:35 #7634
김인구참가자/* eslint-disable */
import styled from 'styled-components';
import React, { useState } from 'react';function App (){
let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
let [따봉, 따봉변경] = useState([0,0,0]);
let [modal, modal변경] = useState(false);let posts = '강남 고기 맛집';
function 제목바꾸기(){
var newArray = [...글제목];
글제목변경( newArray.sort() );
}return (
<div>
<Black_nav>
<div style={ {color:'blue'} }>개발자 blog</div>
</Black_nav>
<button onClick = { 제목바꾸기 } >버튼</button>
<List>
<h3> { 글제목[0] } <span style = { {cursor:"pointer"} } onClick = { () => { 따봉변경(따봉 + 1) } }>?</span>{ 따봉 }</h3>
<p>2월 17일 발행</p>
<hr />
</List>
<List>
<h3> { 글제목[1] } </h3>
<p>2월 18일 발행</p>
<hr />
</List>
<List>
<h3 onClick = { () => { modal변경(!modal) } }> { 글제목[2] } </h3>
<p>2월 19일 발행</p>
<hr />
</List>{
글제목.map(function(글){
return(
<List>
<h3> { 글 } <span onClick = { () => { 따봉변경(따봉 + 1) } } style = { {cursor:"pointer"} }>?</span>{ 따봉 }</h3>
<p>2월 17일 발행</p>
<hr />
</List>
)
})
}<button onClick = { () => { 따봉변경(따봉[0] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[1] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[2] + 1) } }>버튼</button>{
따봉.map(function(a){
return(
<button onClick = { () => { 따봉변경(a + 1) } }>버튼</button>
)
})
}{
modal === true
? <Modal />
: null
}</div>
)
}const Black_nav = styled.div`
background : black;
width : 100%;
display : flex;
color : white;
padding : 20px;
font-weight : 600;
font-size : 20px;
box-sizing:border-box;; const List = styled.div margin-top : 30px;
text-align : left;
padding-left : 20px;
padding-right : 20px;; const Modal1 = styled.div margin-top : 20px;
padding : 20px;
background : #eee;
`;function Modal(){
return(
<Modal1>
<h2>제목</h2>
<p>날씨</p>
<p>상세내용</p>
</Modal1>
)
}
export default App;말씀주신대로 버튼 3개도 만들어보고 그거로 map으로 반복문도 만들엇는데..하..뭐가문제일까요
2021년 3월 29일 22:45 #7636
codingapple키 마스터따봉변경() 용법만 잘못된거같은데 이건 state를 갈아치워주는 함수입니다.
1. 그래서 state 사본을 만들고
2. 수정한다음
3. 따봉변경()에 수정한 state만 집어넣으면 됩니다
state변경강의를 참고해보도록 합시다
참고로 state가 문자, 숫자 이런거면 굳이 사본만들 필요는 없습니다
2021년 3월 30일 17:29 #7658
김인구참가자<button onClick = { () => { 따봉변경(따봉[0] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[1] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[2] + 1) } }>버튼</button>{
따봉.map(function(a){
return(
<button onClick = { () => { 따봉변경(a + 1) } }>버튼</button>
)
})
}이 부분에서 문제가 있다고 말씀주신건가요?ㅜㅜ 계속 이부분만 파는데 답이안나오네요ㅜ
2021년 3월 30일 17:43 #7659
codingapple키 마스터버튼의 onclick 안에
따봉변경(따봉[0] + 1) 이거 대신
let copy = [...따봉]; copy[0]++; 따봉변경(copy)
3줄을 써봅시다
2021년 3월 30일 20:07 #7663
김인구참가자<button onClick = { () => { let copy = [...따봉];
copy[0]++;
따봉변경(copy) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[1] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[2] + 1) } }>버튼</button>{
따봉.map(function(a){
return(
<button onClick = { () => { 따봉변경(a + 1) } }>버튼</button>
)
})
}이렇게도 해보고
{
function 따봉스 (){
let copy = [...따봉];
copy[0]++;
따봉변경(copy)}
}
<button onClick = { () => { 따봉스 }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[1] + 1) } }>버튼</button>
<button onClick = { () => { 따봉변경(따봉[2] + 1) } }>버튼</button>{
따봉.map(function(a){
return(
<button onClick = { () => { 따봉변경(a + 1) } }>버튼</button>
)
})
}로 하는데도 오류만 나네요..하..
map형태로도 만들어보고싶은데
2021년 3월 30일 21:11 #7665
codingapple키 마스터위의 답변처럼 따라하시면 첫 버튼을 눌렀을 때 첫 따봉갯수가 잘 증가합니다
그러니 다른 버튼들도 그거랑 유사하게 만들어보시면 됩니다
에러가 나면 좋은소식입니다 무슨 에러인지 알려주시면 됩니다
2021년 4월 22일 17:06 #8467
김인구참가자/* eslint-disable */
import React, { useState } from 'react';
import styled from 'styled-components';function App() {
const [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬독학']);
const [따봉, 따봉변경] = useState([0,0,0]);const [modal, modal변경] = useState(false);
const [누른제목, 누른제목변경] = useState(0);
const posts = '강남 고기 맛집';// function 제목바꾸기 () {
// const newArray= [...글제목];
// newArray.sort();
// 글제목변경 ( newArray );
// }function 따봉바꾸기1() {
let copy = [...따봉];
copy[0]++;
따봉변경(copy)
}
function 따봉바꾸기2() {
let copy = [...따봉];
copy[1]++;
따봉변경(copy)
}
function 따봉바꾸기3() {
let copy = [...따봉];
copy[2]++;
따봉변경(copy)
}return (
<Wrap>
<Nav>
<div>개발 Blog</div>
</Nav>
{
글제목.map(function(글, i){
return(
<List>
<h3 onClick = { () => {누른제목변경(i)} }> { 글 } <span onClick={ () => {따봉변경(따봉[i] + 1)} }> ? </span> {따봉[i]} </h3>
<p>2월 17일 발행</p>
<hr />
</List>
)
}
)
}<button onClick = { () => { 따봉바꾸기1() } } >버튼1</button>
<button onClick = { () => { 따봉바꾸기2() } } >버튼2</button>
<button onClick = { () => { 따봉바꾸기3() } } >버튼3</button><button onClick={ () => { modal변경(!modal) } }>버튼</button>
{
modal === true
? <Modal 글제목={글제목} 누른제목={누른제목} />
: null
}</Wrap>
);
}const Wrap = styled.div`
font-family:'nanumsquare';
text-align: center;; const Nav = styled.divbackground: #000;
width: 100%;
display: flex;
color: #fff;
padding: 20px;
font-weight: 600;
font-size: 20px;; const List = styled.divmargin-top: 30px;
text-align: left;
padding-left: 20px;
padding-right: 20px;; function Modal(props) { return( <Modals> <h2>{ props.글제목[props.누른제목] }</h2> <p>날짜</p> <p>상세내용</p> </Modals> ) } const Modals = styled.divmargin-top: 20px;
padding: 20px;
background: #eee;
`;export default App;
이렇게 하는게 맞는지 궁금합니다.
-
글쓴이글
- 답변은 로그인 후 가능합니다.