sohyeon kim

state 잘 쓰는 그날까지.. 🥲 💡 카운트를 세보자 import { useState } from "react"; function App() { const [count, setCount] = useState(0); const countFunction = () => { setCount(count + 1); }; return ( {count} Click ); } export default App; setCount 의 초기값을 0 으로 설정하고, 버튼 클릭 시 count 에 + 1 한 값을 set 해준다. ❗️리액트는 state 가 바뀌어야 화면을 다시 렌더링 한다. count 가 아니라 setCount 를 바꿔야 한다!!! count 아무리 바꿔도 안되고 🎀 setCount 🎀를 바꿔야 한다!!! 💡 이름..

헷갈리는 props ..🥵 💡 props : 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 값들 💡 children : 부모 컴포넌트 내에서 자식 태그로 감싼 모든 값들 function User({ children }) { return {children}; } function Layout({ children }) { return ( title~~ {children} ); } function App() { return ( 안녕하세요 {/*children : 부모인 App 내에서 자식 User 로 감싼 안녕하세요*/} content, content, content {/*children : 부모인 App 내에서 자식 Layout 으로 감싼 content..*/} ); } export default App; A..

내배캠 리액트 입문 수업 중.. 내용 정리! 리스트를 추가 하고 삭제해보자 ~ 👩‍💻 전체 코드 📁 App.jsx import React, { useState } from "react"; import "App.css"; import AddButton from "components/AddButton"; import User from "components/User"; function App() { const [users, setUsers] = useState([ {/*기존 리스트*/} { id: 1, age: 11, name: "요리" }, { id: 2, age: 12, name: "미나토" }, { id: 3, age: 34, name: "호리" }, { id: 4, age: 40, name: "사오리"..

🤤 리액트로 리스트를 만들어보자~ html 작성법과 같이 ul 과 li 로 작성! class 는 className 으로 쓴다. import React from "react"; import "App.css"; function App() { return ( 감자 고구마 당근 가지 애호박 ); } export default App; .ul-style { margin: 0; padding: 20px; list-style: none; display: flex; justify-content: space-between; } .li-style { width: 100px; height: 100px; border: 1px solid red; border-radius: 10px; display: flex; justify-c..

💡 props 는 반드시 위에서 아래 방향으로 흐른다. 부모 ➡️ 자식 (단방향) 💡 props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다! import React from "react"; function Son() { return 나는 아들이야!; } function Mom() { const name ="사모님"; return ; } function Grandfa() { return ; } export default function App() { return ; } Mom 의 name 을 Son 에서 쓰고 싶다면? props 로 값을 전달한다! import React from "react"; function Son(props) { console.log(props); // {motherName:..

💡 다른 파일을 import 해서 가져올 때 경로를 ../ 이런 식(상대 경로)으로 들어가지 않고 그 파일의 이름으로 바로 불러올 수 있도록 절대 경로를 설정할 수 있다! 이렇게 ~ 방법은 1. 먼저, 최상위 폴더(root 경로)에 jsconfig.json 파일을 만들어준다. 2. 그리고 파일 안에 아래와 같이 작성 src 폴더 내 파일들은 절대 경로로 작성할 수 있게 된다! 3. 수정할 파일로 들어가 절대 경로로 파일명 수정! 4. 그럼 에러가 발생하는데 다시 npm start 를 해주면 정상적으로 작동된다. ✳️ 이런 식으로 파일을 불러오는게 필수적인 건 아니니 때에 취사선택해 사용하자.

💡 배열의 요소를 정렬하는데 사용하는 sort! 정렬된 이후의 배열을 반환한다. ❗️ 주의) 원본 배열에 변경 사항이 반영된다. const arr = [1, 3, 4, 10, 8]; const arr2 = arr.sort(); console.log(arr); // [1, 10, 3, 4, 8] console.log(arr2); // [1, 10, 3, 4, 8] // 아래도 같은 결과 const arr = [1, 3, 4, 10, 8]; const arr2 = arr; arr2.sort(); 💡 해결법 : 원본 복사를 하고 정렬을 해야 한다! slice() or 전개 연산자 활용 const arr = [1, 3, 4, 10, 8]; const arr2 = arr.slice().sort(); console..

🥹 연습으로.. 간단하게 몇개 적어두겠다! function createItem(name, price) { return { name, price, }; } const items = [ createItem("computer", 2100), createItem("tv", 1800), createItem("book", 15), createItem("phone", 1600), createItem("coffee", 5), createItem("keyboard", 200), createItem("mouse", 140), ]; 💡 filter() : 가격이 300 이하인 아이템 배열 구하기 const result = items.filter((item) => item.price { return acc + cur.pric..

📝 문제 "45분 일찍 알람 설정하기" 원래 설정되어 있는 알람을 45분 앞서는 시간으로 바꾸는 것이다. 현재 상근이가 설정한 알람 시각이 주어졌을 때, 이를 언제로 고쳐야 하는지 구하는 프로그램을 작성하시오. 예제 입력 예제 출력 10 10 9 25 0 30 23 45 23 40 22 55 🫠 나의 풀이 hour, minute = map(int, input().split()) minute -= 45 # 우선 분에서 45분을 뺀다. if minute < 0: # 분이 - 값이라면? minute += 60 # 60 을 더해 원하는 분 값을 얻는다! hour -= 1 # 분이 음수 값이니 한 시간 내리기 if hour == -1: # 그런데 시간이 원래 0 시 였다면? hour = 23 # 뺀 값을 23 으..

👀 영화 검색 사이트 제작 중 검색 창이 스크롤을 따라다니게 만들고 싶었다! ~ scroll ~ ⬇️ 왼쪽에 있는 serch-container 를 고정해 두었다! 💡 설정 코드 HTML ~ Search movie title Click CSS ~ #search-container { align-self: flex-start; position: sticky; top: 0; padding: 10px; } 그리고 설정하다 잘 안되서 찾아본 정보들.. 1. 임계값 설정 고정할 요소에 아래 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 한다. top: 0; right: 0; bottom: 0; left: 0; 2. 사파리 벤더 접두사 추가 사파리 브라우저에서 기능하도록! position: -webkit..