전체 글

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 : props (state,변수,함수,텍스트 등 전송)

변수는 function scope를 가지므로 React에서도 다른 function 내에 있는 변수를 가져다 쓸 수 없다. function App (){ let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']); return ( ) } function Button(){ return ( { btn }

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]..

자동화 : 팝업 높이 계산해서 아래로 쌓기

상황 매번 새로운 팝업이 올라올 때마다 1200px 아래의 팝업 top값을 그 위 팝업의 높이값만큼 수동으로 업데이트하고 있던 상황이었다. 위의 형태의 팝업이 있으며, 각 팝업은 absolute로 표시된다. 팝업 ID 번호는 유연하며, ID 번호는 항상 변경될 수 있다. (관리자사이트에서 사용자인 클라이언트가 맘대로 써넣는다) 각 팝업이 브라우저 너비 1200px 이하로 떨어지면 첫 번째 팝업이 위에서 아래로 순서대로 배치된다. 하단 배치는 css top:npx로 제어되며, 첫 번째 팝업은 top:60px로 시작하고 두 번째 팝업은 top:(위에 있는 팝업의 높이 값 + 20px)로 계산되어야 한다. 1차 해결 const popups = document.querySelectorAll('[id^="pop_..

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..