본문 바로가기
728x90
반응형

전체 글220

[React Bootstarp] 리액트 부트스트랩 설치하기 1. 먼저 새 프로젝트 하나를 생성해주기 2. 구글에 react bootstrap 이라고 검색해서 나오는 사이트에 들어간다(https://react-bootstrap.github.io/) 3. 사이트 가운데 있는 Get started 클릭 4. 가운데 npm install react-bootstrap bootstrap 이거 복사해서 npm install react-bootstrap bootstrap 5. 새로 만든 프로젝트 터미널에 복붙하고 엔터! 6. 부트스트랩 복붙한 사이트에서 좀더 스크롤을 내리면 css 관련 소스도 복사 - 이 단계를 안하면 css 안따라옴 - 둘 중 하나 복사해서 첫번째꺼는 app.js 맨 위에 두번째꺼는 index.html 파일의 태그 안에 복붙 7. 설치 끝! ★ 부트스트랩 .. 2022. 5. 18.
[React] 클릭시 등장하는 UI 만들기 - component 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, **{ useState }** from 'react'; 2. UI가 보임/안보임 정보를 useState로 저장 let [modal, setModal] = useState(false); 3. 삼항연산자 if문을 이용해 state가 true 일때 UI를 보여줌 { modal === true ? : null } 4. function App 아래에 component를 만들어준다. function Modal(){ return( 글제목 발행일자 상세내용 ) } 5. 버튼을 만들고 onClick를 만들어서 ()⇒{setModal(true)}로 해주면 클릭시에 UI가 나타남 여기서 true 가 아니고 !modal로.. 2022. 5. 12.
[React] 리액트 좋아요 개별 클릭수 카운트하기 - 배열 copy 이용 ※ 요약정리 1) 좋아요 useState 배열로 만들어주고 → let [좋아요, 좋아요변경] = [0,0,0] 2) onClick 에서 ( )⇒{ ① 좋아요배열복사해서 → let copy = [...좋아요]; ② 카피된 배열에 카운트를 더하고 → copy[i] = copy[i]+1; ③ 다시 좋아요변경 함수를 이용해 좋아요 배열에 넣어준다. → 좋아요변경(copy); } 3) 카운트 할 곳에 {좋아요[i]} 넣어주면 끝 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, **{ useState }** from 'react'; 2. function App 안에 각각의 좋아요를 카운트할 useState 배열 생성 여기서 좋아요 배열의 갯수는 글제목의 배열.. 2022. 5. 12.
[에러] 리액트 에러 - Each child in a list should have a unique "key" prop. 원인 : 리액트 JSX에서 map함수를 사용할때 나오는 에러 React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. {["Item1", "Item2", "Item3"].map(item => {item} )} 해결방법 : 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 {["Item1", "Item2", "Item3"].map(item => {item} )} { 글제목.map((a,i)=>{ return( {글제목[i]} 5월 5일 ).. 2022. 5. 6.
[React] 글 리스트 반복해서 만들기 - map( ) 함수/ 컴포넌트 반복 ※ 사용하는 기본 map 문법 여기서 반복할데이터는 보통 배열명을 뜻한다. let 반복할 데이터 = ['사자', '호랑이', '토끼']; {반복할데이터.map(()⇒{ retrun(HTML)})} 1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인 import React, { useState } from 'react'; 2. function App 안에 반복해서 나열할 리스트의 내용을 useState 배열로 작성 function App() { **let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);** return( )})} ) } 3. return 안에 map 을 사용하여 반복될 html 작성 function App() { le.. 2022. 5. 5.
[에러] 리액트 에러 - TypeError: a is not iterable TypeError: like is not iterable 원인 state를 생성할때 useState를 적지 않고 그냥 배열로 만듬 //틀린 코드 let [like, setLike] = [0,0,0]; //정답 let [like, setLike] = useState([0,0,0]);​ 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/is_not_iterable 2022. 5. 5.
728x90
반응형

티스토리툴바