Udemy - Max의 React Complete Guide

React에서는 일반 CSS 파일을 만들어서 컴포넌트 내부에서 import './파일명.css' 형태로 불러오기만 하면 바로 사용할 수 있다.즉, 기존 프로젝트에서 쓰던 CSS 그대로 사용 가능하며, 별도의 설정이나 CSS-in-JS 같은 특별한 문법 없이도 적용된다.

바닐라 CSS는 단순하고 익숙하지만 React에서는 스타일이 전역 스코프를 가지는 문제가 있다.이를 해결하는 한 가지 방법이 바로 Inline 스타일이다.Inline 스타일은 특정 요소에만 스타일이 적용되기 때문에 스타일 충돌을 완전히 막을 수 있다.이번 글에서는 In

바닐라 CSS는 단순하고 협업에 좋지만, React에서 가장 큰 단점은 스타일이 전역 스코프를 가진다는 점이다. 즉, 한 컴포넌트의 CSS 파일에서 작성한 규칙이 다른 컴포넌트까지 영향을 줄 수 있다.CSS Modules는 이 문제를 해결할 수 있는 방식이다. CSS는

React에는 다양한 스타일링 방식이 존재한다.Vanilla CSS → Inline Styles → CSS Modules까지 모두 React에서 널리 쓰이는 방식이지만 이번에는 완전히 다른 철학을 가진 스타일링 방식인 Styled Components를 살펴본다.Styl

Styled Components는 동적 스타일링, 상태 기반 조건부 CSS, 중첩 셀렉터, hover 스타일, Media Query까지 모두 처리할 수 있다.이 글에서는 props로 스타일을 동적으로 변경하는 방법, $ prefix를 사용하는 이유, 가상 선택자(:ho

Styled Components는 동적 스타일링, 상태 기반 조건부 CSS, 중첩 셀렉터, hover 스타일, Media Query까지 모두 처리할 수 있다. 이 글에서는 props로 스타일을 동적으로 변경하는 방법, $ prefix를 사용하는 이유, 가상 선택자(:

Styled Components로 여러 UI 요소(div, label, input, button 등)를 만들다 보면, 처음에는 컴포넌트 파일 안에 작은 styled component들을 계속 만들어 붙이게 된다. 하지만 규모가 커질수록 어떤 컴포넌트를 재사용할지, 파일을 어떻게 나눌지가 매우 중요해짐. 1. 파일 안에 그대로 둘 것 vs. 분리할 것 S...

React는 기본적으로 state(상태)를 통해 UI를 업데이트하는 구조지만, 때로는 state로 굳이 관리하지 않아도 되는 값이나 DOM 요소 자체에 접근해야 하는 상황이 생긴다.이때 사용하는 것이 바로 Ref(Reference, 참조)이다.Ref는 말 그대로 특정

Udemy React 강의 134번 정리React에는 UI를 구성하는 두 개의 중요한 값이 있다.state : UI를 업데이트하기 위한 값ref : DOM 요소 또는 저장하고 싶은 값을 직접 참조하기 위한 값둘은 "언제 사용하는가"와 "리렌더링이 발생하는가"에서 큰 차

Udemy React 강의 137번 정리이 강의에서는 ref의 두 번째 핵심 용도를 다룬다. DOM 요소 말고도 UI에 직접 영향 없는 값을 저장할 때 ref를 쓸 수 있다는 점.특히 타이머 예제를 통해 왜 변수나 useState로는 안 되고, 왜 ref가 정답인지 설

Udemy React 강의 139번 정리리액트에서 ref는 원래 DOM 요소에 연결할 때 사용한다.하지만 커스텀 컴포넌트 내부의 DOM 요소에 ref를 연결하고 싶을 때는 상황이 조금 까다롭다.강의 예제에서는 TimerChallenge → ResultModal 모달을

Udemy React 강의 140번 정리이전 방식은 이러하다. TimerChallenge 컴포넌트는 ResultModal 내부가 dialog라는 사실을 알고 있어야 하고, 만약 내부 DOM이 <dialog>에서 <div>로 바뀌면? showModal() 메서

Udemy React 강의 141번 정리setTimeout()은 한 번만 실행됨 → 경과 시간 추적 불가목표 : \- 시간이 지속적으로 얼마나 남았는지 추적시간이 끝나면 자동으로 모달 열기사용자가 중간에 STOP 눌러도 멈추기성공과 실패를 구분하여 표시그래서 setT

Udemy React 강의 160번 정리이번 강의의 핵심은 크게 두 가지.Task를 어떻게 상태로 관리할 것인가왜 prop drilling이 문제가 되는가 (그리고 왜 다음에 다른 방법을 배우는지)NewTask 컴포넌트에 input + Add Task 버튼이 있음버튼을

Udemy

Udemy React 강의 167번 정리이번 강의에서는 Context를 제공한 뒤, 실제 컴포넌트에서 소비(consuming)하는 방법을 배웠다.핵심은 props 대신 Context에서 값을 꺼내 쓰는 것이다.현재 Cart 컴포넌트는 이런 역할을 한다.장바구니 아이템

Udemy React 강의 168번 정리이전까지 Context는 항상 빈 배열을 가진 정적인 값이었음.이제 목표는 이거임 : Context를 실제 state와 연결해서 값을 읽는 것뿐 아니라 값을 변경하는 것까지 Context로 처리하기.이 state의 구조는 이미 C

Udemy React 강의 170번 정리이번 강의에서는 Context 값을 사용하는 컴포넌트가 언제, 왜 다시 실행(리렌더링)되는지를 다뤘다.핵심은 생각보다 단순하다. useContext로 Context 값을 사용하는 컴포넌트는 그 Context 값이 변경되면 자동으로

Udemy React 강의 171번 정리이번 강의의 목표는 Cart 관련 state + 로직을 전부 Context로 옮겨서 prop drilling을 완전히 제거하는 것이다.이전까지 구조는 대략 이러했다.그래서 App에서 onAddToCart, cartItems, on

Udemy React 강의 172번 정리지금까지 App 컴포넌트에서 :장바구니 state 관리 (useState)아이템 추가 / 수량 변경 함수들Context에 전달할 value 객체 생성<CartContext.Provider value={...}> 설정즉, Co

Udemy React 강의 173번 정리CartContextProvider 컴포넌트 안에서 장바구니 상태를 관리 중임상태는 객체 / 배열 형태상태 업데이트 로직이 점점 복잡해짐항상 함수형 업데이트를 써야 함로직이 길어질수록 가독성이 떨어짐상태 변경 규칙이 컴포넌트 안에

React Udemy 강의 178번 정리이번 강의의 핵심은 한 가지, "렌더링 중에 state를 바꾸면 왜 문제가 생기고, 그걸 useEffect로 어떻게 해결할까?"사용자 위치를 가져와서 그 위치를 기준으로 장소 목록을 정렬. 그리고 그 결과를 state에 저장.이

React Udemy 강의 179번 정리Side effect면 무조건 useEffect를 써야 한다고 생각했다면 틀렸다.useEffect는 남용하면 안 된다.이번 강의의 핵심은 이거다.사용자가 place를 클릭함선택한 장소를 state에 추가 → UI 업데이트동시에 l