[React]조건문과 반복문
조건문 – 삼항연산자
삼항연산자 사용하는 방법
조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드조건문 예제
게시글 상세 내용 모달창으로 열고 닫기 예제
1.state에 UI를 열고 닫을 스위치를 만들어준다.
let [modal, modal변경] = useState(false);2.스위치가 켜지면 모달창이 보이도록 한다.
{
modal === true
? <Modal></Modal>
: null
}3.세번째 게시글을 선택하면 스위치가 켜지도록 만든다.
<h3 onClick={()=>{modal변경(true)}}> { 글제목[2] } </h3>true 을 !modal 로 변경하면 열고 닫을 수 있다.
전체 코드
App.js
/* eslint-disabl */
import React, {useState} from 'react';
import './App.css';
function App() {
let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
let [따봉, 따봉변경] = useState(0);
let [modal, modal변경] = useState(false);
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자 코트 변경';
newArray[1] = '연희동 맛집 추천'
글제목변경(newArray);
}
return ( //return 안쪽에 html 문법을 작성할 수 있다.
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className='list'>
<h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1)} }>👍</span>{따봉}</h3>
<p>12월 17일 발행</p>
<hr/>
</div>
<div className='list'>
<h3> { 글제목[1] } </h3>
<p>12월 17일 발행</p>
<hr/>
</div>
<div className='list'>
<h3 onClick={()=>{modal변경(true)}}> { 글제목[2] } </h3>
<p>12월 17일 발행</p>
<hr/>
</div>
{
modal === true
? <Modal></Modal>
: null
}
</div>
);
}
function Modal(){
return(
<div className='modal'>
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
App.css
.App {
text-align: center;
}
body {
font-family: "nanumsquare";
}
.modal {
margin-top: 20px;
padding: 20px;
background: #eee;
}
.black-nav {
background-color: black;
width: 100%;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-size: 20px;
}
.list {
margin-top: 30px;
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
결과 화면
반복문 – map
for문을 이용하여 반복문을 사용할 수 있으나 map() 함수를 사용하여 더 간편하게 반복문을 사용할 수 있다.
map() 사용하는 방법
{
반복할데이터.map(function(배열안요소){
return (
// 반복할 HTML
)
})
}
// 화살표 함수 사용할 경우
{
반복할데이터.map( () => { return ( 반복할 HTML ) } ) }
}for문 사용하는 방법
// 1.반복된 UI를 함수로 만들어준다.
function 반복된UI(){
var array = [];
for(var i = 0; i < 3; i++){
array.push(<div>안녕</div>)
}
return array;
}
// 2.사용하고자 하는 위치에 함수를 불러온다.
{ 반복된UI() }반복문 예제
게시글 목록을 반복문으로 출력
{
글제목.map(function(글){
return (
<div className='list'>
<h3 onClick={()=>{modal변경(!modal)}}> { 글 } </h3>
<p>12월 17일 발행</p>
<hr/>
</div>
)
})
}결과 화면
전체 코드
App.js
/* eslint-disabl */
import React, {useState} from 'react';
import './App.css';
function App() {
let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
let [modal, modal변경] = useState(false);
function 반복된UI(){
var array = [];
for(var i = 0; i < 3; i++){
array.push(<div>안녕</div>)
}
return array;
}
return ( //return 안쪽에 html 문법을 작성할 수 있다.
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
{
글제목.map(function(글){
return (
<div className='list'>
<h3 onClick={()=>{modal변경(!modal)}}> { 글 } </h3>
<p>12월 17일 발행</p>
<hr/>
</div>
)
})
}
{ 반복된UI() }
</div>
);
}
export default App;
App.css
.App {
text-align: center;
}
body {
font-family: "nanumsquare";
}
.modal {
margin-top: 20px;
padding: 20px;
background: #eee;
}
.black-nav {
background-color: black;
width: 100%;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-size: 20px;
}
.list {
margin-top: 30px;
text-align: left;
padding-left: 20px;
padding-right: 20px;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
warning 없애는 방법
map() 함수로 반복문을 돌리면 문제없이 작동하지만 console 창에 에러가 생긴다. 이를 해결하는 방법은 key={} 값을 추가하는 것이다.
Warning: Each child in a list should have a unique “key” prop.
{
글제목.map(function(글,i){
return (
<div className="list" key={i}>
<h3 onClick={()=>{modal변경(!modal); 클릭한제목변경(i)}}> { 글 } <span onClick={ ()=>{ 따봉변경(따봉+1)} }>👍</span>{따봉}</h3>
<p>12월 17일 발행</p>
<hr/>
</div>
)
})
}
