목록분류 전체보기 (61)
훈돌라
// 카운터 앱 만들어보기 정규 커리큘럼 과제에 집중하되 너무 막히면 머리도 식힐 겸, 복습도 할 겸 지난 강의들을 다시 들어보며 실습하는 시간을 가지려고 한다. import './App.css' // CSS 파일을 가져옵니다. import React, { useState } from "react";const App = () => { const [number, setNumber] = useState(0); const onMinusButtonClick = () => { setNumber(number - 1); } const onPlusButtonClick = () => { setNumber(number + 1); } return ( div> div>{number}d..
import React from 'react'function Child () { return div>연결성공div>}function Mother () {return Child/>}function GrandFather () { return Mother/>}function App () { return GrandFather/>}export default App props컴포넌트끼리의 정보 교환 방식props 는 반드시 위에서 아래 방향으로 흐른다. 부모 = > 자식 방향으로만 흐른다. [단방향]props 는 반드시 읽기 전용으로만 취급하며, 변경하지 않는다. useState React에서 상태(state)를 관리하기 위해 사용되는 훅함수형 컴포넌트에서 상태를 사용할 수 있게 해주며, 상태의 초기값과 상태..
배열 Arraylet 변수 ["하하", 123, "후후후", false, { a: 1 }][ ] → 대괄호 작성대괄호 사이에 필요한 데이터자료형 상관없음 (문자열, 숫자, 불리언, 객체 등)여러개의 데이터를 한 번에 저장하고 싶을 때 사용"하하" 부터 인덱스 0 -> 데이터에 접근하고 싶을 땐 변수 우측에 => 변수[0] = "하하" 객체 Objectlet 변수 { 이름: "밤송이", 종: "포메라니안", 나이: 9 }{ } → 중괄호 작성중괄호 사이에 key, value 형식으로왼쪽이 key, 오른쪽이 value관련된 데이터를 한 번에 관리하기 위함Array 와의 차이 Array 는 순서가 존재함 -> 인덱스로 접근가능 [i]object 는 순서가 없으나 키가 존재함 -> key 로 접근 가능 = 변..
DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>자바스크립트 기초title> link rel="stylesheet" href="index.css">head>body> div class="side-bar"> div> button class="side-bar-btn">열기button> div> ul> li> 메뉴1 li> li> ..
투두리스트 만들기,, 필수 조건들만 겨우 겨우 완성해서 제출할 수 있었다. 뭐가 이렇게 어려운지,, 바닐라로 했으면 뚝딱 만들었을 것 같은데 리액트로 하려니 너무 어렵네.. import React, { useState } from 'react';//todo 아이템 스타일const todoinstyle = { width: '300px', height: '200px', border: '3px solid red', borderRadius: '10px', marginLeft: '10px',};//todo 추가 폼 컨포넌트const SubmitForm = ({ onAddItem }) => { const [name, setName] = useState(''); const [nameco, setNamec..
function App() { const handleClick = () => { alert("안녕하세요!"); } // return ( /* */ div style={{ height: '100vh', display: ' flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }} > { } span>이것은 내가 만든 App 코드입니다span> button onClick= {handleClick} >클릭!button> div> );}export default App; 객체 안 ..