코딩애플

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 ) }

React : 옛날 class문법

class 문법으로 컴포넌트 만드는 법 class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 컨텐츠.. ) } } class 컴포넌트명 extends React.Component를 만든 후 그 안에 constructor, super, render 세 가지 함수를 넣는다. return 안에 축약할 html을 적는다 class 컴포넌트에서 state 만드는 법 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'noran', age : 20 } } render(){ return ( 내 이름은 {this.state...

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