공부기록용

❓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)을 ..

🔴Element Rendering 🔻ReactDOM.render() 🔴React.createElement() React React 요소는 변경이 불가능하다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없다. (특정한 시간대의 UI를 보여줄 뿐) 그래서 UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render() 로 전달하는 것이다. ReactDOM React DOM이란, Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다. React DOM에는 리액트 엘리먼트를 브라우저에 렌더링 하는 데 필요한 모든 도구가 들어 있다. ReactDOM.render() element는 리액트의 가장 작은 단위이다. ReactDom.rend..

🔴모듈 내보내고 가져오기(export / import) 🔴default export / named export export 선언부 앞에 export 붙여준다. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클래스 내보내기(끝에 ;_세미콜론을 붙이지 않음) export class User { constructor(name) { this.name = name; } } // 함수 내보내기(끝..