우사미 코딩

버튼 클릭했을 때 콜백함수 정의하는거 그거임 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; // ..

1. 경로 1) same directory - ./ 2) up one directory - ../ 2. export js파일에서는 함수와, 변수 모두 export할 수 있다. 3. import import 할 때는 함수명은 변경할 수 있고 변수명은 변경이 불가하다! App.js에서 fuction App()라는 이름으로 정의된 함수더라도 import MyApp from './App'; 으로 이름을 바꿔서 불러올 수 있는데, 이건 다양한 패키지에서 동일한 함수명이 있을 때 중복을 피하기 위해서 사용한다. 이렇게 함수명은 변경할 수 있지만 변수명은 변경이 불가함! 패키지를 불러올 때는 경로를 입력하지 않고 바로 import React from 'react'로 사용할 수 있는데 이건 node_modules폴더에..

1. Layout function App(){ const name = 'usami'; const age = 5; return ( My name is {name} and I'm {age}! ) } 변수를 선언하고 보여질 컴포넌트에 컨텐츠를 업데이트하는데 오잉 컴포넌트는 대부분 비슷한 레이아웃을 하고있네영 그럼 뭐다? 재활용이 가능하게 컴포넌트화 하면 된다! 암튼 이건 컴포넌트에서 다시 다룰거임 html input태그에 속성을 입력하는 것을 jsx에서는 props라고 하는데 이걸 어떻게 사용하는지 보겠습니당 1. 변수로 속성 설정하기 function App(){ const inputType = "number" const minValue = 5; return } 2. curly braces로 속성을 array..

저번에 index.js파일을 만들고 h1태그를 반환하는 리액트 함수를 만들었단 말이져\? 저렇게 태그로 반환되는걸 jsx라고 한다네염 그럼 이렇게 반환된 코드는 이렇게 표현된다고 함;;; 여튼 이론은 이러하고 message라는 변수를 선언해서 string값으로 설정한 후 h1 태그에 출력해보자. * 변수 선언과 출력 function App(){ this is an element! // it dosen't show on the screen, because it's not returning on line 14 let message = 'Bye there!' let num = Math.random() if(num > 0.5){ message = 'Hello there!' } console.log("num : ..