본문 바로가기

react props3

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

티스토리툴바