🩵 React19 [React🩵] Styled-components Styled-components란?리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지컴포넌트에 공통으로 적용할 스타일을 만든다백틱(`)으로 감싸서 작성한다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 "b.. 2025. 3. 13. [React🩵] useState 01. useState란?React 컴포넌트에서 상태 관리하는 Hook함수형 컴포넌트에서 상태를 사용할 수 있게 도와준다 02. 기본 문법const [state, setState] = useState(initialValue);state → 현재 상태 값setState → 상태를 업데이트하는 함수initialValue → 상태 초기 값 03. 사용법3-1. 기본 사용법import { useState } from "react";function Counter() { const [count, setCount] = useState(0); const handleButton = () => setCount(count + 1) return ( 현재 카운트: {count} +1.. 2025. 2. 28. [React🩵] Props 01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mother() { const lastName = "최"; const firstName = "르탄"; // ✅ 새로운 props 추가!// 자식 컴퍼넌트 child에 props를 전달 return ;}// 자식 컴퍼넌트인 child는 props를 전달받아 사용// props는 단순 파라미터명으로 변경 가능function Child(props) { return ( {`내 이름은 ${props.lastName}${props.firstName}입니다.`} );}쉽쥬? 👍🏻.. 2025. 2. 27. [React🩵] id와 className HTML을 대~충 보고 넘어왔더니 새로 보는 개념들이 많다그 중에 id와 class이라는 HTML 속성에 대해 들었는데, 리액트에서도 사용이 된다고 함id, className은 각각 언제 사용되는지 어떤 역할을 하는지 알아보자 01. id(고유 식별자)특정한 하나의 요소를 고유하게 식별한다(한 페이지에 같은 id는 하나만 있어야한다) 1-1. CSS 예시 - 스타일링//jsxconst App = () => { return 이건 제목!;};//css#main-title { color: red; font-size: 30px;}위 예시처럼 jsx에서 여러개의 h1이 있을 수 있고, 여러개의 h1 중에 단 하나의 h1 요소에만 스타일링을 할 수 있음 1-2. JS 예시 - 버튼클릭const Ap.. 2025. 2. 27. [React🩵] Promise 01. Promise란?JavaScript에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체이 객체는 비동기 작업이 수행될 때 그 결과값을 나중에 받기 위한 약속으로 사용된다주로 서버에서 데이터를 요청하고 받아오는 HTTP 요청 처리에 사용되며 파일 시스템 작업 등 다양한 비동기 작업에서 활용된다 02. Promise의 세가지 상태상태설명발생 시점Pending (대기 중)아직 작업이 완료되지 않은 상태Promise가 실행되었지만, resolve() 또는 reject()가 호출되지 않음Fulfilled (이행됨)작업이 성공적으로 완료된 상태resolve(value)가 호출되었을 때Rejected (거부됨)작업이 실패한 상태reject(error)가 호출되었을 때 03. 햄버거 주문 예제로.. 2025. 2. 26. [React🩵] ||(or연산자) ??(Nullish Coalescing 연산자)의 차이점 01. || (OR 연산자) vs ?? (Nullish Coalescing 연산자)의 차이점공통점: 둘다 기본값을 설정하는데 사용된다차이점: * ||(OR 연산자): Falsy**값이면 오른쪽 값을 사용한다* ??(Nulllish Coalescing 연산자): null 또는 underfined일 때만 오른쪽 값 사용**Falsy값: false, 0, "", null, undefined, NaN 02. 활용 예시const displayPreferences = (preference) => { const textLength = preference.textLength || 50; // `||` 사용 console.log("1 => ", textLength); const itemsPe.. 2025. 2. 26. 이전 1 2 3 4 다음
