공부기록용

보호되어 있는 글입니다.

❓css-in-js와 styled-components이 상당히 유사해 보여서 혼동!! 자세한 차이를 알고 싶음❓ CSS modules CSS Modules에서는 스타일을 정의한 CSS 파일의 클래스 이름들이 객체로 변환되어 자동으로 생성된 모듈에 들어가게 된다. 컴포넌트에서는 이러한 클래스 이름을 사용하여 스타일을 적용한다. /* styles.module.css */ .container { padding: 16px; background-color: #f0f0f0; border: 1px solid #ccc; } .text { color: blue; font-size: 16px; } ➕ 이 CSS들이 styles객체로써 js파일에 import되어지고 사용할 때도 객체에서 값을 찾아오는 방식으로 사용해야 함!..

🔴 Hooks 🔻State Hook(useState) 🔻Effect Hook(useEffect) 🔻useMemo 🔻useCallback 🔻useRef Hook 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야했다. 그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스컴포넌트의 기능을 구현하기 위해 React 16.8버전에 추가된 것이 바로 Hook이다. 즉, 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 ..

* : HTML페이지 내부의 모든 태그를 선택 *은 페이지에 있는 전체요소를 대상으로 한다. #A: id가 A인 태그를 선택 #은 id가 부여된 요소를 대상으로 한다. 🔻id는 문서에서 중복되지 않도록 한 요소에 한 개의 아이디를 사용한다. 🔻id선택자는 유연성이 없고 재활용할 수 없다. .A: class가 A인 태그를 선택 .은 class / className가 부여된 요소를 대상으로 한다. 🔻class이름은 서로 다른 태그에서 중복으로 사용 가능하다. 🔻같은 유형의 여러 요소를 선택할 때 사용한다. 🔻하나의 요소에 2개 이상의 class를 적용할 수 있다. ➡️ 띄어쓰기로 구분해줌(target, id도 여러개 사용 가능 하지만 지양!) A B: 태그명이 A인 태그와 B인 태그를 선택 따로 class나..

보호되어 있는 글입니다.

보호되어 있는 글입니다.