본문 바로가기

React (old ver)22

React Hook - { useEffect } Q. 화면이 등장하여, 2초가 지나면 alert 문구, "The maximum number of guests is 2 guests."를 삭제해보자. 단 업데이트될 때 재등장하지 않으며, 2초가 되기전 화면을 나갔다가 다시 돌아와도 2초가 유지되어야 한다. 앞서 useEffect를 배우고, 활용하여 작성해 보자. 1. uesEffect을 import 한다. import React, { useState, useEffect } from "react"; // useEffect 추가 2. uesEffect를 변수에 담지 말고, 바로 실행시킨다. useEffect( ()=> { 실행될 코드~~~ } ) 위 코드에서 useEffect의 "실행될 코드"가 실행되는 순간은, 1 컴포넌트가 그려질 때와 2 컴포넌트가 업데.. 2021. 11. 6.
React Router 리액트 라우터 활용편 + { useHistory } 뒤로가기 뒤로가기 버튼을 구현해보자(react-router-dom v5 이상, react v16.3 이상 사용 가능) 1. useHistory기능을 사용하기 위해 import 해온다. import { useParams, useHistory } from 'react-router-dom'; // useHistory 추가 2. useHistory를 변수가 담아준다. let history = useHistory(); 3. goBack() 함수를 실행한다. { history.goBack() }}>Back to main import React from "react"; import { useParams, useHistory } from 'react-router-dom'; function Detail(props){ let { .. 2021. 11. 6.
React Router 리액트 라우터 활용편 - 상세페이지 제작 Answer 1. App.js import { Route } from 'react-router-dom'; 2. Item.js import { Link } from 'react-router-dom'; { props.item.country }, { props.item.city } { props.item.price } won 3. Detail.js import { useParams } from 'react-router-dom'; let { id } = useParams(); let matchedItem = props.items.find(function(item){ return item.id == id; }); props.item[item위치] ➜ matchItem import { useState } from 'react'.. 2021. 11. 6.
React Router 리액트 라우터 활용편 - 상세페이지 제작 Quiz Q. 아래 코드를 변경하여, 각 컴포넌트 아이템(여행 상품)을 클릭하였을 때, 데이터 Id값을 path값으로 지닌 detail 페이지로 넘어가 보자. (예: /Detail/1~3) export default [ { id: 1, country : "Africa", city : "Sahara", price : "4,500,000" }, { id: 2, country : "Italy", city : "Venice", price : "2,000,000" }, { id: 3, country : "Turkey", city : "Cappadocia", price : "3,560,000" } ] import { useState } from 'react'; import './App.css'; import itemList.. 2021. 11. 6.
React Router 리액트 라우터3 { Link } Q. { Link }를 이용하여, 각 단어를 클릭하면 "/", "/Article", "/Contact"로 이동되도록 변경해보자. import './App.scss'; function App() { return ( Home Article Contact ); } export default App; 1. { Link }를 import 선언한다. import { Link } from 'react-router-dom'; 2. 로 감싼다. Home 3. HTML 결과 Home import './App.scss'; import { Link } from 'react-router-dom'; function App() { return ( Home Article Contact ); } export default App; 부.. 2021. 11. 6.
React Router 리액트 라우터1 { Route, Switch } 1. react-router-dom@5 설치 npm install react-router-dom@5 yarn add react-router-dom@5 2. index.js에 설정 추가 import를 선언해 주고, 을 로 감싸준다. import { BrowserRouter } from 'react-router-dom'; 3. 'url/'와 'url/A'로 페이지를 나눠보자. 3.1. app.js에 import 먼저 선언 import { Route, Switch } from 'react-router-dom'; 3.2 를 이용해 분기 처리 의 path="" 안에 원하는 경로명을 지정해준다. 기본 페이지입니다. A 페이지입니다. 결과: http://localhost:3001/ 기본 페이지입니다. http://l.. 2021. 11. 5.
data.js에 있는 데이터를 useState()에 담기. feat.map() Q. 국가명과 도시명, 가격을 별도의 데이터파일로 저장하고, 이를 useState()에 담아 가져와 list를 작성해보자. /* eslint-disable */ import { Navbar, Container, Nav } from 'react-bootstrap'; import './App.css'; function App() { return ( Africa, Sahara 4,500,000 won Italy, Venice 2,000,000 won Turkey, Cappadocia 3,560,000 won ); } export default App; 1. 작명.js 파일을 생성하고 export 시킨다. 다른 컴포넌트에서도 사용할 수 있도록 export 선언해주고 그 안에 작성한다. export/import .. 2021. 10. 30.
내보내기 export /가져오기 import 1. export: 내보내기 export default export default는 어떤 파일의 코드를 타파일에서 사용하고 싶을 때 사용하는 코드로, 뒤에는 변수명이나, 함수가 들어갈 수 있다. 예로, 'mint coding'이 여러 곳에서 사용되어야 할 경우, 이를 name에 담아 export 해주면 그 어떤 파일에서도 간단히 name으로 해당 값을 넣어줄 수 있다. const name = 'mint coding'; export default name; export는 맨 마지막 줄에 위치하여, 한 파일에서 단 한번만 사용할 수 있다. 2. import 가져오기 import 작명 from './경로.js'; // .js를 생략해도 괜찮다. import name from './경로.js'; // 꼭 nam.. 2021. 10. 30.
bootstrap 연결 방법 1. bootstrap 설치 npm install react-bootstrap bootstrap 2. public > index.html에 bootstrap 연결 3. 클래스 사용 Danger 4. 컴포넌트 사용 import { Nav } from 'react-bootstrap'; // { } 안에 사용할 컴포넌트 명 삽입 Active Link Link import { Nav } from 'react-bootstrap'; import './App.css'; function App() { return ( Active Link Link ); } export default App; React-Bootstrap : React-Bootstrap The most popular front-end framework, .. 2021. 10. 30.
input 입력값을 가져와, 기존 state에 추가해보자. Q. 아래 코드를 변경하여, input에 입력된 메뉴를 메뉴 리스트에 추가하여 오늘 메뉴에 선택할 수 있게 변경해 보자. import React, { useState } from 'react'; import './App.scss'; function App() { let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']); let [menuNum, menuNumFunc] = useState(0); return ( { menuTit.map( ( menu, i )=>{ return ( { menuNumFunc(i) } } key={i} >{ menu } ) }) } 입력 ); } function Today(props){ return ( 오늘은 { props.men.. 2021. 10. 30.
map & props 응용편 Q. 위 코드의 h1 결과값은, "오늘은 짜장면짬뽕울면 먹는 날" 이다. "짜장면짬뽕울면"이라는 메뉴는 중국집에 없으므로, 디폴트는 "짜장면"이되, 메뉴 버튼 클릭시, 누른 버튼의 메뉴만 h1에 삽입되도록 변경해보자. import React, { useState } from 'react'; import './App.scss'; function App() { let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']); return ( { menuTit.map( ( menu, i )=>{ return ( {} }>{ menu } ) }) } ) } function Today(props){ return ( 오늘은 { props.menuTit } 먹는 날 ) } e.. 2021. 10. 30.
props, 부모의 state를 가져와 보자. Diary의 "2021/10/30"을 하드코딩하지 말고, 같은 값을 가진 부모의 변수, day을 가져와 보자. 1. 부모 컴포넌트에 담긴, 자식 컴포넌트에 변수를 담는다. 2. 자식 컴포넌트 함수에 props를 넣어준다. 여기서 props는 부모 컴포넌트에서 넘긴 변수(이 경우, day)를 모두 담은 오브젝트이다. function Diary(props){ 따라서, 자식 컴포넌트에서 부모에게서 받은 변수를 사용하기 위해서는 오브젝트에서 데이터 가져오듯 사용해야 한다. props.가져오고싶은변수명 { props.day } 짜장면 먹은 날 /* eslint-disable */ import React, { useState } from 'react'; import './App.scss'; function App(.. 2021. 10. 30.
반복문은 map을! (중괄호 { } 안 for 역시 인식하지 못해) 1. .map 사용법 데이터.map(function(){ return ( ) }) 2. 활용 예시 import React, { useState } from 'react'; import './App.scss'; function App() { let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']); return ( { menuTit.map( ( menu )=>{ return ( { menu } ) }) } ); } export default App; 3. 그래도 for문을 사용하고 싶다면 별도로 함수 선언하여 불어올 것. import React, { useState } from 'react'; import './App.scss'; function App() .. 2021. 10. 29.
Toggle: 중괄호{ } 안 if는 안되니, 삼항연산자를 이용하자. Q. 버튼을 클릭시, 버튼 아래에 컴포넌트 Diary가 toggle이 되도록 바꾸어 보자. import React from 'react'; import './App.scss'; function App() { return ( show diary // 다이어리 위치 ); } function Diary(){ return( 제목 날짜 상세내용 ) } export default App; A. 1. 먼저 Diary의 상태를 변수로 담는다. import React, { useState } from 'react'; let [diaryState, diaryStateFunc] = useState(false); 2. 삼항연산자를 이용하여, diary 상태에 따라 삽입여부를 결정하게 한다. { diaryStateFunc( !.. 2021. 10. 29.
Component 2, 파일 분리 (모듈화) Component 1, function 컴포넌트() Q. 아래 코드 중 .diary 영역을 function()을 이용하여, 컴포넌트화 해보자. import './App.scss'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear();.. fresh-mint.tistory.com 위 글에서 컴포넌트 를 새파일로 분리 해보자. 1. 파일 생성, 컴포넌트.js 일반적으로 파일명은 컴포넌트명과 동일하게 주어지고, 역시 동일하게 첫문자는 대문자로 작성한다(Diary.js). 2. function Diary(){} 를 삽입하고 리액트 기본 설정 값을 추가 import React f.. 2021. 10. 29.

티스토리툴바