우사미 코딩

animals 배열에 담겨있는 요소를 배열을 순회하면서 AnimalShow라는 컴포넌트를 만들고 컴포넌트의 type이라는 속성 값으로 배열의 각 요소를, key의 속성 값으로 현재 index를 props로 넘겨주고 싶은데여 그럼 map을 사용하면 됨! * App.js import AnimalShow from "./AnimapShow"; import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){ const[an..

import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){ const[animals, setAnimals] = useState([]); const handleClick = () =>{ setAnimals([...animals, getRandomAnimal()]); console.log(animals); } return ( Add animal {animals} ); } export default App; lin..

위와 같이 아주 심플한 페이지가 이씁니당 add animal 버튼을 클릭하면 아래 숫자가 1씩 업데이트되어 렌더링하도록 할 거예염 그럼 우리가 이때 일반 javascript라면 그냥 변수를 선언하고 값을 업데이트하면 되겠지만 ㄴㄴ 여기서는 그렇지가 않습니다 jsx에서는 state라는걸 사용해야하는거져 빨간 박스처럼 state가 component를 다시 렌더링해서 화면에 보이는 데이터를 업데이트 해준다고 합니다 state를 사용하려면 state를 import 해야겠죠? import { useState } from "react"; App.js 상단에 위 코드를 import 해줍니다 state 사용하는 방법은 const [변수명, setter함수] = useState(초기값) 입니당 setter함수가 변수값을..

버튼 클릭했을 때 콜백함수 정의하는거 그거임 https://legacy.reactjs.org/docs/events.html SyntheticEvent – React A JavaScript library for building user interfaces legacy.reactjs.org 이거슨 리액트의 이벤트를 모아놓은 것 버튼을 만들고 마우스 클릭이벤트 연결 ㄱㄱ 콜백함수는 리액트에서 표기법이 다양하기 때문에 간단한 방법으로 하면 됨 import AnimalShow from "./AnimapShow"; function App(){ const num = 0; const handleClick = () =>{ console.log("handleClick!") } return ( console.log("hel..

https://bulma.io/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io 태그 하나하나 다 쓰기 귀찮으니 디자인이 되어있는 벌마라는 css 라이브러리를 사용할거임! https://bulma.io/documentation/components/card/ 프로필 카드 같은거 만들건데 예시를보니 이게 좀 괜찮아보임 여기서 class는 className으로 변경하고 필..

1. src폴더안에 images 폴더 생성 후 이미지파일 넣는다 2. 이미지를 import한다 (App.js) import ProfileCard from "./ProfileCard"; import AlexaImage from "./images/alexa.png"; import CortanaImage from "./images/cortana.png"; import SiriImage from "./images/siri.png"; console.log(AlexaImage); console.log(SiriImage); function App(){ return( Personal Digital Assistance ); } export default App; 이미지는 컴포넌트처럼 변수로 선언하여 사용할 수 있다. i..

1. 크롬에서 React Developer Tools 확장프로그램을 설치한다 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2468a8735 on 5/19/2023. chrome.google.com 2. 열어두었던 페이지를 새로고침하고 관리자 도구를 켠다 화살표누르고 components 클릭한다 3. 현재 페이지의 components와 props를 확인할 수 있다 끝

1. App.js import ProfileCard from "./ProfileCard"; function App(){ return( Personal Digital Assistance ); } export default App; src파일에 ProfileCard.js라는걸 만들었고 이 컴포넌트의 props로 title, handle정보를 넘겨줄 것이다 2. ProfileCard.js // function ProfileCard(props){ // 아래와 동일 function ProfileCard({title, handle}){ // const title = props.title; // const handle = props.handle; // const { title, handle } = props; // ..