가보자구!

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

개념정리/React 2023. 11. 26. 16:37

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

개념정리/CSS 2023. 11. 26. 16:37

🔴props 🔴Props 추출 props 컴포넌트간의 정보교환/교류 방식, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달 import React from 'react'; // 자식 function Son() { return 나는 아들입니다.; } // 엄마 // Mother -> Son 으로 정보를 전달했다. function Mother() { const name = "흥부인"; return ; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보..

개념정리/React 2023. 11. 19. 15:12

🔴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..

개념정리/React 2023. 11. 19. 14:55

🔴모듈 내보내고 가져오기(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; } } // 함수 내보내기(끝..

개념정리 2023. 11. 19. 14:53