반복문 쓰는 법
for랑 map2가지가있다.
1.for
function으로 만들어주고 아래에서 { 함수명() } 으로 불러와준다.
// for반복문을 쓰고싶다면?
// 함수안에서 사용하고 어레이에 HTML추가
// array를 마지막에 return으로 뱉어냄
function 반복된UI(){
var 어레이 = [];
for (var i=0;i<3;i++){
어레이.push(<div>안녕</div>)
}
return 어레이
}
{
반복된UI()
}2.map
-우선 짧은 map 예제
// map함수 예제 , map은 유사 반복문
var array = [2,3,4]
var newarray = array.map(function(a){
return a * 2
})
console.log(array)
console.log(newarray)
// 모든 데이터가 2씩 곱해져서 새로운 데이터 생성됨 이게 map역할임.-실제로 map사용 예제
useState에 있는 [a,b]중 a를 활용해서 map으로 사용한다.
{
// for 대신 쓰는 jsx문법
// map()
글제목.map(function(글){
return (
<div className="list">
<h4>{ 글 } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
)
// return <HTML>
})
}
결론적으로 좀 기괴한 모양이 나왔는데, 좋아요 역시도 같은 갯수만큼 useState로 만들어줘서
별도로 작동하게 만들어줘야한다. 해당부분 추후 구현해보도록하자.
let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
let [따봉,따봉변경] = useState(0)당연한거지만 같은 갯수로 배열로 만들어줘야 할것이고
이것도 배열 전체가 변경되야 하게 하겠지? deepcopy방법써서 변수전달해서 하면 함수 하나로 될거같다.
우선은 아래까지만 완성
/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'
function App() {
let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
let [따봉,따봉변경] = useState(0)
// 글제목 변경이랑 갯수 똑같이 하면 되겠지
// 그리고 아마 배열 전체를 바꿔줘야 할거같고... 흠...
let [modal,modal변경] = useState(false)
let posts = "군자 훠궈 맛집"
function 제목바꾸기(){
var newArray = [...글제목]
newArray[0] = '뉴욕'
newArray = newArray.sort()
글제목변경(newArray)
}
// function 따봉바꾸기(index){
// var newArray2 = [...따봉]
// newArray2[index] = newArray2[index] + 1
// 따봉변경(newArray2)
// }
return (
<div className="App">
<div className="black-nav">
<div >개발 BLOG</div>
</div>
<h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
<div className="list">
<h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>
<p>4월 15일 발행</p>
</div>
<hr/>
<div className="list">
<h4>{ 글제목[1] }</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list">
<h4>{ 글제목[2] }</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list">
<h4>{ 글제목[3] }</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
<button onClick = {()=>{modal변경(!modal)}}>모달창</button>
{
modal === true
? <Modal></Modal>
: null
}
</div>
);
}
function Modal(){
return(
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
https://flykimjiwon.tistory.com/27 작성하면서 해결완료
/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'
function App() {
let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
let [따봉,따봉변경] = useState([0,0,0,0])
let [modal,modal변경] = useState(false)
let posts = "군자 훠궈 맛집"
let [누른제목,누른제목변경] = useState(0);
function 제목바꾸기(){
var newArray = [...글제목]
newArray[0] = '뉴욕'
newArray = newArray.sort()
글제목변경(newArray)
}
function 따봉바꾸기(index){
var newArray = [...따봉]
newArray[index] = newArray[index] + 1
따봉변경(newArray)
}
return (
<div className="App">
<div className="black-nav">
<div >개발 BLOG</div>
</div>
<h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
{
글제목.map(function(글, i){
return(
<div className='list'>
{/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/}
<h3 onClick={ ()=>{ 누른제목변경(i)}} > {글} <span onClick={() => {따봉바꾸기(i)}}>🥰좋아요!</span> {따봉[i]}</h3>
{/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */}
<p>1월 10일 발행</p>
<hr/>
</div>
)
})
}
{/* alt + shift + down키 '행'복사 */}
{/* <button onClick={ ()=>{ 누른제목변경(0)}}>버튼1</button>
<button onClick={ ()=>{ 누른제목변경(1)}}>버튼2</button>
<button onClick={ ()=>{ 누른제목변경(2)}}>버튼3</button>
<button onClick={ ()=>{ 누른제목변경(3)}}>버튼4</button> */}
<button onClick = {()=>{modal변경(!modal)}}>모달창</button>
{
modal === true
? <Modal 글제목 = {글제목} 누른제목 = {누른제목}></Modal>
// 작명 = {전송할state} 보통 똑같이 쓴다.
: null
}
</div>
);
}
function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
return(
<div className="modal">
<h2>제목 {props.글제목[props.누른제목]}</h2>
{/* 내가 방금누륵제목의 숫자를 넣을 수 있게 하자 */}
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;'React' 카테고리의 다른 글
| React props 추가 (0) | 2022.01.10 |
|---|---|
| React props (0) | 2022.01.09 |
| React Component 문법 (0) | 2022.01.09 |
| React state 변경하는법 (0) | 2022.01.09 |
| React State (0) | 2022.01.09 |
