728x90 반응형 Coding With Jina/React19 [React] 리액트 클릭시 나오는 상세페이지UI 만들기 - component/props ※ 요약 제목 state 하나 만들어줘서 0으로 둔다 → let [title, setTitle]=useState(0); 부모 컴포넌트에서 작성 → 자식 컴포넌트쪽에 props 파라미터 등록 후 props.작명 으로 사용 → {props.글제목} 클릭한 글제목의 숫자를 title 배열 안에 저장해서 사용할 수 있도록 한다 → {props.글제목[props.타이틀]} 클릭하는 부분의 글제목에 onClick에서 title 변경 함수를 이용해 글제목의 숫자를 바꿔준다. → setTitle(i) 1. 제목 div onClick에 상세페이지 기능 추가 → onClick={()=>{setModal(!modal)}} {글제목.map((a,i)=>{return( {setModal(!modal)}}**>{글제목[i]} {.. 2022. 6. 3. [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. [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. [React] 리액트 초기 세팅 - ③ create-react-app을 이용해서 개발환경 구축하기 리액트 시작 전 초기 세팅 1) Node.js 사이트에서 npm 다운로드 및 설치하기 2) npm을 이용해서 create react app 설치하기 3) create react app을 이용해서 개발환경 구축 3) create react app을 이용해서 개발환경 구축 3-1) 디렉토리 설정하기 ① 원하는 경로에 react-app 폴더 생성 (폴더명을 react라고 하면 안됨 → 특수한 문자이기때문에 create-react-app에서 거절) ② cmd 창에 cd (Change Directory 라는 뜻)와 스페이스바를 입력한 후에 생성한 폴더를 드래그 해서 넣고 엔터! (cd만 입력하고 드래그 하면 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다. 라고 뜸) ③ 자동으로 경로를 알려줌 .. 2021. 1. 12. [React] 리액트 초기 세팅 - ② npm을 이용해서 create react app 설치하기 리액트 시작 전 초기 세팅 1) Node.js 사이트에서 npm 다운로드 및 설치하기 2) npm을 이용해서 create react app 설치하기 3) create react app을 이용해서 개발환경 구축 2) npm을 이용해서 create react app 설치하기 2-1) create react app 설치 ① cmd 실행창을 연다(윈도우키+r) ② npm install create-react-app@2.1.8 이라고 치고 엔터 (여기서 버전을 안쳐주면 최신형으로 설치가 되는데 버전이 다르면 이고잉님 생활코딩 리액트 강의와 호환이 안될 수 도 있어서 똑같이 따라함) ③ 중간에 -g 를 추가로 입력해주면 컴퓨터 어디에서든지 create-react-app을 설치 실행할 수 있기때문에 매우 편리 ④ 그.. 2021. 1. 12. 이전 1 2 3 4 다음 728x90 반응형
