전체보기134 [React🩵] useEffect와 components lifecycle (컴포넌트의 생명주기) 01. 컴포넌트의 생명주기탄생 → 변화 → 소멸 의 과정을 거친다useEffect를 사용하면 생명주기 단계마다 특정 작업을 실행할 수 있다 마운트(Mount): 컴포넌트가 화면에 처음 나타날 때(탄생)업데이트(Update): 상태(state)나 props가 변경되어 다시 그려질 때(리랜더링 포함)언마운트(Unmount): 컴포넌트가 화면에서 사라질 때(제거) 02. 마운트(Mount)컴포넌트가 처음 화면에 랜더링 될 때 발생하는 과정HTML요소가 DOM에 추가된다 ☑️ 마운트 시 실행되는 것들useEffect의 첫번째 실행console.log()가 있으면 처음 한 번 출력됨API요청(데이터 불러오기) 같은 초기 작업 수행import { useEffect } from "react";function .. 2025. 3. 14. [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. 이전 1 2 3 4 5 6 ··· 23 다음
