JavaScript

React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)

데이터 바인딩해서 컴포넌트로 뿌리기 조건 data.js로 분리되어있는 data를 바인딩해서 컴포넌트로 만들어 여러 상품을 한번에 뿌려야 한다. 풀이 function App() { let [shoes] = useState(data); return ( ShoeShop Home Cart Pricing { shoes.map(function(a, i){ return ( ) }) } ); } function Product(props){ return ( {props.shoes[props.i].title} {props.shoes[props.i].price} ) } 알게 된 점 중괄호({}) 내에서 문자열에 변수를 포함시키려면 템플릿 리터럴(Template literal) 문법을 사용해야한다. 템플릿 리터럴은 백틱(``..

React : 다른 파일의 데이터 바인딩하기 (import, export)

코드가 길어지면 state나 데이터를 다른 파일로 분리해서 export/import 해오면 된다. export할 파일 let a = 10; export default a; import할 파일 import a from './data.js'; function App() { return ( {a} // 10 ) } export 여러개 하고 싶은 경우 let a = 10; let b = 100; export {a, b}; import {a, b} from './data.js'; function App() { return ( {a} // 10 {b} // 100 ) }

문제해결 : hash값 받아서 scroll 조정하기

상황 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.) A페이지 제목1 제목2 제목3 제목4 ... B페이지 컨텐츠 제목 1 컨텐츠 ... 컨텐츠 제목 2 컨텐츠 ... 컨텐츠 제목 3 컨텐츠 ... 컨텐츠 제목 4 컨텐츠 ... 컨텐츠 제목 5 컨텐츠 ... ... 문제 항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다. 조건 A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다. 해결 B페이지에서 아래 코드를 실행시..

React : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice)

input에 글 쓰면 게시글 추가하기 조건 input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다. 아무 텍스트도 입력하지 않았다면 발행을 막는다. 풀이 let [input, setInput] = useState(''); let handleSubmit = (e) => { e.preventDefault(); if (input.trim() !== ""){ let copyTitle = [...title]; copyTitle.unshift(input); setTitle(copyTitle); } else {alert(`글제목을 입력하세요.`)} } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { li..

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 }