목록전체 글 (46)
훈돌라
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PQTna/btsHDNYYnWm/2M3mPYIThkZXC8H2ggko00/img.png)
카운트 앱 숫자 증가, 감소 시키기function App() { const [count, setCount] = useState(0); const addCount = () => { setCount(count + 1); } const disCount =() => { setCount(count -1); } return ( Count: {count} div> button onClick={addCount}>+button> button onClick={disCount}>-button> div> );}export default App; 다크모드function App() { const [isDark, setIsDark] = useSt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rwDFL/btsHCszXnNf/ztf1PqB3keOZhkofwF0Lw0/img.png)
const numbers = [1, 2, 3, 4, 5]const double = numbers.map(number => number * 2);console.log(double)const users = [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 24 }, { name: 'Carol', age: 23 } ]const usersName = users.map(user => user.name);console.log(usersName); const users = [ { name: 'Alice', age: 30, city: 'Seoul' }, { name: 'Bob', age: 25, city: 'New York' }, { name: 'Charlie', age: 35,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/y2PrN/btsHxE9OlXD/FCxrwL4T6azJHw57OnJ7FK/img.png)
import './App.css'import styled from 'styled-components';const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;`const boxList = ["red", "green", "blue"];const getBoxName = (color) => { switch (color) { case "red": return "빨간 박스"; case "green": return "초록 박스"; case "blue": return "파랑 박스"; default: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/B45VR/btsHxBLQHtJ/GZchIFjJkidGal7wr7UbzK/img.png)
// 카운터 앱 만들어보기 정규 커리큘럼 과제에 집중하되 너무 막히면 머리도 식힐 겸, 복습도 할 겸 지난 강의들을 다시 들어보며 실습하는 시간을 가지려고 한다. 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)를 관리하기 위해 사용되는 훅함수형 컴포넌트에서 상태를 사용할 수 있게 해주며, 상태의 초기값과 상태..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1wvIs/btsHuxo4cAY/pX33GweYywur7rHDJ6mKp0/img.png)
배열 Arraylet 변수 ["하하", 123, "후후후", false, { a: 1 }][ ] → 대괄호 작성대괄호 사이에 필요한 데이터자료형 상관없음 (문자열, 숫자, 불리언, 객체 등)여러개의 데이터를 한 번에 저장하고 싶을 때 사용"하하" 부터 인덱스 0 -> 데이터에 접근하고 싶을 땐 변수 우측에 => 변수[0] = "하하" 객체 Objectlet 변수 { 이름: "밤송이", 종: "포메라니안", 나이: 9 }{ } → 중괄호 작성중괄호 사이에 key, value 형식으로왼쪽이 key, 오른쪽이 value관련된 데이터를 한 번에 관리하기 위함Array 와의 차이 Array 는 순서가 존재함 -> 인덱스로 접근가능 [i]object 는 순서가 없으나 키가 존재함 -> key 로 접근 가능 = 변..