React

목표 리액트 라우터의 기능들 중 navigate, nested routes, outlet 사용법을 익힌다. 기본 설정 import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom' App.js 상단에 위 내용을 import한다. 페이지 이동기능 useNavigate {navigate('/')}}>Home {navigate('/detail')}}>Detail {navigate(-1)}}>Back / 는 홈으로 이동, -1은 이전 페이지로 이동이다. 만약 파라미터로 2가 들어간다면 다음 2 페이지로 이동을 의미한다. 404 페이지 만들기 Route 태그들 중 가장 밑에 사용해야 하는 태그이다. 윗 태그들 중 알맞은 url이 없는 주소를 사..

목표 App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 가져온다. Detail.js 컴포넌트 → App.js 이동 과정 1. Detail.js 컴포넌트 export function DetailCard(){ return( 상세내용 출력 ) } export default DetailCard; 2. App.js에서 Detail.js import import DetailCard from './Detail' 뒤의 경로에 특별한 확장자를 입력하지 않으면 '.js'로 자동인식한다. 한 파일에서 여러 컴포넌트를 사용하고 싶은 경우 1) Detail.js function DetailCard(){ return( 상세내용 출력 ) } fuction BriefCard(){ return( 간략내용 출력 ) } expor..

목표 기존 자바스크립트 방식에서는 페이지를 나눌 때, html 파일을 만들어서 상세페이지 내용을 채우고 사용자가 url로 접속하면 현재 페이지와 다른 html 파일을 전송해줬다. 하지만 React에서는 index.html 하나 페이지만을 한다. 다른 페이지로 이동하는 것처럼 보일 수 있지만, 기능에 따라 보이는 컴포넌트를 교체해준 것 뿐이다. 이 때, 이 컴포넌트 교체 기능을 도와주는 라우팅 라이브러리인 react-router-dom 라이브러리 사용법에 대해 공부해보겠다. 라이브러리 사용을 위한 설정 1. 라이브러리 설치 npm install react-router-dom@6 터미널에서 프로젝트 폴더로 이동한 후 위 명령을 실행하여 라이브러리를 설치한다. 2. index.js 세팅 변경 import { ..

목표 서버로부터 전송받은 데이터를 React에서 사용할 수 있는 방법을 익힌다. export, import 1) data.js let a = 10; let b = 100; let c = ['kim',20] let d = {name : 'kim', age : 20 } export {a,b,c,d} a, b 변수를 다른 스크립트문에서 사용할 수 있도록 export 해준다. 2) App.js import {a,b,c,d} from './data.js'; data.js에서 a,b,c,d 변수를 가져온다. 이후로 App.js 에서는 data.js에서 받아온 a,b,c,d 데이터를 사용할 수 있게 된다. JSON 형식의 데이터 읽기 1) 서버가 전송한 JSON let data=[ { id : 0, title : "..

목표 이미지 태그 사용법을 익힌다. URL 지정하는 법 1. CSS에서 url을 지정한다. 1) CSS .main-bg{ height: 400px; background-image: url('./img/apple.PNG'); background-size: cover; background-position: center; } 2) App.js 2. htm 태그 내에서 src 속성을 사용 import appleImagePath from './img/apple.PNG'; url 괄호 내부에 들어가는 경로를 입력해주기 위해 양단에 작음 따옴표와 덧셈 부호가 들어간다. 3. img 태그내 src 속성에 이미지 저장소 url 입력 이미지 경로 설정법 1. public 폴더에 이미지가 있는 경우 process.env.P..

목표 Bootstrap을 사용하여 기존에 만들어진 UI들을 사용해본다. Bootstrap 설정 과정 1. React Bootstrap 설치 npm install react-bootstrap bootstrap 프로젝트 폴더 터미널에 위 명령어를 입력해주면 설치가 가능하다. 단, 명령어 변경이 발생할 수 있으므로 아래 사이트에서 확인해 보는 것이 바람직하다. https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 2. CSS 관련 Stylesheets import 1) App.js 에 im..

목표 Array 형식의 state의 원소를 추가 및 삭제해본다. Array state 추가 삭제 문법 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); let [따봉, 따봉변경] = useState([0,0,0]); let [inputVal,setInputVal] =useState(''); 위와 같이 정의된 state들을 함수들을 통해 변형해보자 1. Array state 추가 - unshift {setInputVal(e.target.value);}}/> { let copy=[...글제목]; copy.unshift(inputVal) 글제목변경(copy); let addLike = [...따봉]; addLike.unshift(0) 따봉변경(addLike..

목표 input 태그에서 이벤트 리스너를 사용하는 방법과 이벤트 버블링을 방지 방법에 대해 공부해본다. input 태그 사용하기 1. 이벤트 리스너 {실행할코드}}/> {실행할코드}}/> onChange는 값이 변화할 때마다, onClick은 클릭되었을 경우 이벤트가 발생한다. 2. input에 입력한 값 가져오기 1) state 설정 let [inputVal,setInputVal] =useState(''); 2) 텍스트로 입력한 값 state에 저장 {setInputVal(e.target.value)}}/> 이벤트 버블링 방지하기 이벤트 버블링이란? 한 요소에 이벤트가 발생하면 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들..

목표 위 사진에서 보이는 목록에서 제목을 클릭하면, 그와 관련된 정보를 띄우는 모달이 하단에 출력되도록 하겠다. 현재는 목록의 어떤 제목을 클릭해도 아래와 같이 첫번째 제목인 '나_Hi'만 출력되는상태이다. 코드 작성 순서 1. state 생성 let [indexNum,setIndexNum] =useState(0); 동적 UI 변동을 줘야하므로 state를 사용한다. 2. state 상태 함수를 이용하여 indexNum state 값 변경 { //a는 하나씩, i는 0부터 반복될때마다 1씩 증가하는 수 글제목.map(function(a,i){ return( {setModal(!modal); setIndexNum(i)}}>{a} { let copy=[...따봉] copy[i]=따봉[i]+1 따봉변경(cop..

목표 부모 컴포넌트가 자식 컴포넌트를 호출할 때, 자식 컴포넌트는 부모 컴포넌트에서 정의된 state 사용이 필요할 수 있다. 이 때 props 파라미터를 이용하여 부모 state를 가져와 보자. 부모->자식 state 전송 1. 자식 컴포넌트 호출 시, 호출 태그 내부에 전송할 state 작성 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); { modal==true?:null } 위 코드는 부모 컴포넌트가 Modal이라는 컴포넌트를 호출하고 있는 것이다. 글제목이라는 state를 글제목이라는 이름으로 자식 컴포넌트에 전송하고 있다. 또한 color와 같이 state는 아니지만, 이와 같은 방식으로 자식 컴포넌트에 문자열이나 함수, 수등을 전송할 수..