삼항연산자

React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

1. 컴포넌트 안에서 쓰는 if/else 컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다. if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다. function Component() { if ( true ) { return 참일시 노출될 HTML; } else { return null; } } else 생략하는 법 return을 만나면 코드가 종료되므로 이렇게 축약 가능하다. function Component() { if ( true ) { return 참일시 노출될 HTML; } return null; } 2. JSX 안에서 쓰는 삼항연산자(ternary operator) jsx 내(return 내)에서 쓸 수 있다...

React : 2초 뒤에 사라지는 alert 만들기 (useEffect, 숏서킷평가)

2초 뒤에 사라지는 alert 만들기 풀이 - 바닐라 js 버전 import { useEffect } from "react" function Detail(props){ useEffect(()=>{ setTimeout(()=>{ document.querySelector('.alert-warning').style.display = 'none' },2000) }); return ( 2초 이내 이벤트로 이동하세요 ) } 풀이 2 - react 스타일 버전 import { useEffect, useState } from "react" function Detail(props){ let [alert, setAlert] = useState(true); useEffect(()=>{setTimeout(()=>{ setAl..

React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f..

React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)

조건 좋아요 버튼을 누르면 각각의 게시글의 좋아요가 1씩 올라가야 한다. 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [like, setLike] = useState([0,0,0]); let handlesetLike = (i) => { let copyLike = [...like]; copyLike[i] = copyLike[i] + 1; setLike(copyLike); } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { like[i]..

React : map 사용해서 div 반복생성하기

map의 기능 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); console.log(newArray) map은 array의 자료개수만큼 코드를 반복실행한다. 파라미터를 각 자료로 가진다. return 우측의 코드를 array에 담고 map 쓴 자리에 남겨준다. map 사용해서 div 반복생성하기 array자료인 state도 array.map으로 활용할 수 있다. (array 개수만큼 반복생성된다) function App (){ let [title, sortTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return (..

React : 동적인 UI 만들기 (현재 상태, 조건문 삼항연산자)

현재 상태 작성하기 // 전부 가능 let [Modal, setModal] = useState(0); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(false); state를 만들고 현재 UI의 상태정보를 저장한다. 현재 모달창의 상태만 표현할 수 있으면 어떤 자료든 상관없다. 삼항연산자 JSX 안에서는 if / else / for 등 문법을 사용할 수 없다. 그러나 중괄호 안에 삼항연산자는 사용할 수 있다. // 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 3 > 1 ? console.log('맞음') : console.log('아님') function App (){ let [modal, s..