미미 공부/취미방

React Props 이해하기 커스텀 엘리먼트를 만들고 그 태그 안에 적는 모든 데이트를 props라고 부른다고 이해했다. props는 object(객체) 형태로 생성된다. 객체 데이터의 형태 { 이름 : 값, 이름 : 값 } 그래서 위의 코드에 props라는 매게변수도 object 형태로 전달전달전달전달전다랄ㄹㄹㄹ 된다. 1. 엘리먼트를 통해서 comment라고 선언된 객체 데이터의 date, text, author가 전달된다. 여기서 전달된 props의 형태 date: 날짜정보, text: "I hope you enjoy learning React", author: { name: "Hello Kitty", avatarUrl: "https://......" } 2. 함수 내부에서 user={props...

01 key와 리렌더링 알아보기 key값은 해당 요소에만 들어간 유일하고 고정된 값이다. (랜덤으로 요소의 순서를 바꾸는 상황) key값이 없는데 리렌더링 되는 경우 요소의 글자가 바뀐다고 판단해서, 모든 글자를 리렌더링하고, 리렌더링 되더라도 포커스 위치가 그대로 있는다. key값이 있는데 리렌더링 되는 경우 요소의 위치가 바뀐다고 판단해서, 위치를 재배치한다. 포커스가 해당 key 요소에 고정되 따라다닌다. useState로 key값을 제일 먼저 비교하고 바뀐 부분만 리렌더한다. 02 상태 끌어올리기 state lifting 형제요소끼리 서로 상태를 감지할 수 없기 때문에, 부모가 감시해서 컨트롤 할 수 있게 state lifting이라는 개념을 사용한다. 1. React.useState()는 Bod..

01 React style 스프레드 연산자(props. 해당 코드에서는 {...rest})에는 정보들이 다 들어있다. 정보들은 Button 커스텀 엘레먼트를 이용해 만든 태그들에 들어있는 정보들이다. (해당 코드에서는 className, text, style) 일반 CSS와 동일하게 순서와 레벨에 따라 속성 값이 덮어써진다. (예. inline CSS > id > class > tag) style props는 객체 데이터고, 스타일은 카멜케이스로 넣어준다. 커스텀 엘레먼트에 들어가 있는 모든 props들은 공통적으로 적용된다. *HTML에서 이미 사용 중인 태그명 혹은 속성명은 최대한 사용하지 않으려고 한다. 02 useRef() js의 document.querySelector, getElementBy...

01 컴포넌트 상태 다루기 컴포넌트 : 엘리먼트(요소)의 집합 useState 컴포넌트의 상태 관리 React.useState(기본값)을 console창에 출력해 보면 배열 데이터를 반환한다. keyword는 값, setKeyword는 값 할당에 사용된다. useState를 사용하면 새로 랜더하지 않아도, 값이 바뀌면 바로 랜더된다. (지난번 코드는 render함수로 을 매번 랜더해줬다.) 02 컴포넌트 사이드 이펙트 다루기 useEffect 컴포넌트의 사이드 이펙트 관리 (부수 효과) 부수 효과를 내기 위한 훅 어떤 조건을 설정해서 그 조건이 변할 때 동작한다. 조건은 dependency array라고 한다. 공란 : 아무것도 넣지 않으면 모든 변화에 동작 실행 [] : 빈 배열은 처음에 컴포넌트가 실..

01 리랜더링 (리액트의 장점) (예시) button 내부 텍스트를 매 초 바뀌게 한다면, JS는 버튼이 새로 만들어지면서 글자가 바뀐다. React는 변경된 부분만 새로 들어가고, 버튼은 처음 그대로 있다. 바뀌기 전후 DOM을 비교하고 새로 그릴지 판단한다. 타입 > key > props 순서로 비교해서 바뀐 부분만 새로 그린다. 리플로우, 리페인트? 02 addEventListener event를 카멜케이스로 넣는다. (예) onClick, onBlur, onFocus ... 03 간단한 검색창 만들어보기 onChange가 일어날 때 input 내부 value 받아서 p태그에 업데이트해주기 1. state 객체변수 생성. keyword라는 속서을 넣는다. 2. onChange가 발생할 때, keyw..

01 React 맛보기 리액트는 라이브러리(도구)로 자유롭게 사용이 가능하다. 사용자가 많다. JSX, FLUX, Functional Programing, CDN?? 리액트 관련 라이브러리 swr, framer motion *라이브러리 : 개발 편의를 위한 도구 (예. React) *프레임워크 : 기반 구조까지 잡혀있음 (예. Angular) 02 DOM 다루기 Element 생성하기 DOM은 브라우저가 이해하는 Element의 원형 (논리 트리로 표현) Element는 우리가 보는것 createElement() React.createElement( type, {props}, {...children} ) ReactDOM.createRoot(document.getElementById('root')); ro..