creamymood의 개발 공부 발자취 💭

Styled Components란?React에서 CSS 파일을 따로 안 만들고, JSX 안에서 스타일을 컴포넌트처럼 선언해서 쓰는 방식이야.말 그대로 스타일도 컴포넌트화해서 쓴다는 거지. 설치방법 사용 방법백틱! 재사용 할 수 있다. 다른 추가 내용을 적어서 ! 또 다른 하나의 특징. 리액트가 클래스명을 알아서 정해준다. 프롭스 기능 ✨✨ 백틱을 쓴다는 건 템플릿 리터럴을 쓴다는 거니까, ${} 이걸로 자스 코드 사용 가능템플릿 리터럴 사용한다는 것의 의미가, 이러한 css를 자스를 이용해서 동적으로 변경할 수 있게 된다는 뜻 스타일 컴포넌트도 컴포넌트로써, 다른 리액트 컴포넌트처럼 프롭스 받아서 사용 가능-> 조건부 렌더링, 받아온 값도 그대로 받는 등 여러가지 활용 전역 스타일 설정css파일 ..

1. new Date()2. Date 객체 메소드3. 리액트 시간 관련 상태 관리4. 날짜 라이브러리5. 시간 비교new Date()는 JavaScript의 기본 내장 메서드. Date 객체를 생성하는 방법으로, 날짜와 시간을 다룰 때 자주 사용됩니다. 이 메서드는 JavaScript의 표준 내장 객체인 Date를 사용하여 현재 날짜와 시간 또는 특정 날짜와 시간을 생성할 수 있습니다.사용 예시:현재 날짜와 시간 생성:const currentDate = new Date();console.log(currentDate); // 예: Mon Apr 15 2025 12:34:56 GMT+0000 (Coordinated Universal Time)특정 날짜와 시간 생성:const specificDate = new..

리액트 + SCSS 꼭 알아야 할 개념 정리1. SCSS란?Sass의 확장 문법 (SASS 3버전에서 등장한 최신버전)기존 CSS보다 더 효율적으로 스타일을 작성할 수 있게 해주는 CSS 전처리기.scss 확장자를 사용변수, 중첩, 믹스인, 함수 등 다양한 기능 제공 2. 리액트 프로젝트에 SCSS 적용 방법sass 패키지 설치npm install sassSCSS 파일 생성: App.scss컴포넌트에서 가져오기import './App.scss'; 3. SCSS 주요 문법개념 설명 예시변수반복되는 값 관리$primary-color: #333;중첩계층적인 구조 표현nav { ul { li { } } }믹스인코드 재사용 가능@mixin flex-center { display: flex; justify-con..

🥺 멈춰 시간아 !setInterval은 주어진 시간이 지난 뒤, 특정 작업을 반복해서 실행하게 해주는 함수이다. 쉽게 말하면, 일정 시간 간격으로 어떤 작업을 계속해서 실행하도록 설정 하는 것 예를 들어, 1초마다 화면에 "Hello"를 출력하고 싶다면, setInterval을 사용해서 1초마다 그 작업을 반복할 수 있다. 예를 들어, 아래와 같다 setInterval(() => { console.log("Hello");}, 1000); // 1000ms (1초)마다 실행이렇게 하면 console.log("Hello")가 1초마다 계속 출력 된다. 중요한 점:setInterval은 무한으로 반복되기 때문에, 반복을 멈추고 싶을 때는 clearInterval을 사용해서 멈출 수 있다. 예를 들어, s..

힘차게 으랏샤샤샤 ! ...... ^__ㅠ🍈 custom hook ?→ 기존 내장 훅 외에도, 내가 원하는 기능을 내 마음대로 코드 쳐서 만들 수 있을 수 있다. 코드를 짜다보면, 생각보다 중복코드도 많아지고, 그에 따라 가독성이 떨어질 수 있는데.. 내가 직접 정의 해서 만든, custom hook을 사용하면 중복 코드는 ↓ 재사용성은↑ 그에 따라, 코드 가독성은↑, 유지 보수도 쉬워진다! 자주 쓰는 로직을 재 사용할 때 정말 좋다.🍈  기본 문법 → custom hook을 만드는 법은 어렵지 않다. 여느 내장 훅 처럼 use를 사용하면 된다 !   ▾기본 문법▾function useMyHook() { // 훅 로직 작성 (예: useState, useEffect 등) return 값 또는 함수..

🍈🐰🤍 useRef를 공부하며, 다른 내장 훅들도 같이 알아두면 좋을 것 같아서 정리 해보기. - 🧚‍♀️  💡✨useRefuseRef는 React에서 DOM 요소에 직접 접근하거나, 변화를 감지하지 않고 값을 저장할 때 쓰는 훅 : 컴포넌트가 리렌더링되어도 값이 유지되고, DOM 요소를 직접 조작할 때 사용한다.  Ex : 주로 input 요소 같은것을 직접 건드릴 때 사용 *useRef 를 보다 자세히 이해하고 싶다면, 연관 개념인 컨트롤 컴포넌트를 알아보는 것을 추천   useRef 사용방법 :     useRef 기본문법 :import { useRef } from 'react';const myRef = useRef(initialValue); - initialValue: 처음에 넣고 싶은 ..

1. 컨트롤 컴포넌트가 뭘까? 비유로써 알아보기2. 상위 개념과 하위 개념3. 어떨 때 주로 사용되는지, 대체 할 수 있는 useRef💡✨컨트롤 컴포넌트가 뭘까? 비유로써 알아보기🎬 1. 비제어 컴포넌트(Uncontrolled Component)     너는 지금 "입력창(input)" 역할이야.     💬 누군가 "이름을 입력해줘!" 라고 해.     그래서 네 마음대로 쓰기 시작해.     Jane이라고 쓰고, 이 내용은 너 혼자만 알고 있어.     React(관리자)는 몰라.     React는 ref 같은 걸로 나중에 몰래 엿봐야 해. 📦 React: "Jane이 뭘 썼는지 모르겠네… 나중에 확인해야겠다."🎬 2. 제어 컴포넌트(Controlled Component)     이제 다시 ..

1. HTML 구조나 디자인을 바꿀 수 없을까?2. 조건부 렌더링 확실히 이해할 예제3. 실습으로 이해 해보자    3-1 조건문(if문)으로 조건부 렌더링 실습   3-2 삼항연산자로 조건부 렌더링 실습 렌더링이 될 때, 내용이 새로 업데이트 되면 내용만 바뀌는건데.. 그렇다면 틀은 똑같지 않나 ?🐰HTML 구조나 디자인을 바꿀 수는 없을까 ?더보기디자인을 바꿀 땐, className 속성을 적용하면, css에서 적용할 수 있다. 그럴 때 사용하는 기술이 "조건부 렌더링" 이다 특정 조건이나 상태에 따라서 다른 컴포넌트나 요소를 렌더링 하는 것.보통 조건문이나 논리 연산자를 활용한다 ! 잠깐 궁금한 부분을 해결 한 뒤, 실습으로 개념을 이해해보자. 나의 고민.. 그냥 상태 함수 써서 다르게 보이면 되..

지난번에 class형 컴포넌트와 함수형 컴포넌트에 대해 종류가 무엇이고, 각 컴포넌트의 장단점에 대해 공부 했었다.✎🤍 그 중 간단히 공부했었던, 생명주기에 관련하여 오늘 조금 더 깊게 정리해보았어요 ! 🤍  🤍 1. 생명주기란 ? 2. 왜 필요한가?3. 클래스형과 함수형의 생명주기💡✨생명주기란? ▾ 아래 내용을 읽는다면, 한방에 이해 가능.▾ 리액트 공부하기 - 생명주기를 쉽게 이해해보자. (개인적인 견해를 덭붙여서)생명주기란 말.. 너무 와닿지 않아 너.. 생명 주기 때문에 어려움을 겪고 계신 여러분들,, 제 글을 보며 조금 도움이 되길 바랍니다...    그냥 생명주기라고 하지말고 관리타이밍 이라고 이creamymood.tistory.com  컴포넌트는 태어나고(mount), 살고(updat..

함수형은 그나마 재밌어 ~ 함수형은 그나마 재밌어 ~ 함수형은 그나마 재밌어 ~  ..... 1. 함수형 컴포넌트 생명주기와 메서드2. 생명주기 메서드 useEffect3. 의존성 배열이 여러개라면 ?  💡✨ 함수형 컴포넌트 생명주기와 메서드 클래스 컴포넌트의 생명주기 메소드는 3가지가 있었지만,함수형에서는 useEffect로 사용할 수 있다.  ▾ 아래 내용을 읽는다면, useEffect 한방에 이해 가능.▾ 리액트 공부하기 - 생명주기란? 왜 필요할까? 어디에 쓰일까?리액트 생명주기 공부하는 동안 내 마음 ↓  그래도 해야지.. 어떡해.    1. 생명주기란 ?2. useEffect()?3. 언제 주로 필요로 하는가  3-1 데이터 받아올 때,   3-2 이벤트 핸들러 사용시,   3-3 타crea..