![]()
https://www.udemy.com/course/best-react/ 1. jsx 제한 사항 및 해결 방법 - 루트 요소는 1개여야만 한다 - 그 이유는 자바스크립트 자체가 원래 하나의 요소만 반환하기 때문 // 자바스크립트에서 아래 문법은 불가능 하다 return ( React.createElement('h2',{}, 'hi'); React.createElement('h2',{}, 'hi'); ); 1) 해결 방법 ⓐ 여러개의 요소를 하나의 태그(아무태그)로 감싼다. => div soup 발생, 불필요한 렌더링 과정 실행 * div soup : div태그가 중첩되어 스타일링이 깨질 수도 있고, 속도가 느려질 수도 있다. ⓑ 배열형태로 반환한다. => 경고 발생 키가 필요하기 때문 그래서 이상적인 해..
![]()
https://www.udemy.com/course/best-react/ * css 파일로 빼서 jsx파일에 import하는 방식 : 파일 내 모든 컴포넌트 요소에 영향을 미침 1. 동적 스타일 1) 인라인 스타일 hi - 라벨의 색상을 state 값에 따라서 동적으로 적용 가능 - 인라인 style은 최우선순위기 때문에 css파일을 오버라이드 함 2) css 클래스 .className1.className2 { color: black; } - 템플릿 리터럴을 이용하여 동적으로 클래스 이름 추가 가능 - css 파일에서 클래스 이름에 따른 css를 설정해주면됨 2. styled components - 컴포넌트 별 스타일을 지정할 수 있는 패키지 npm install --save styled-componen..
![]()
【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 배열 동적으로 렌더링 - 상위 컴포넌트에서 동적으로 변화하는 배열을 props로 받았을 때, 하위 컴포넌트에서 동적으로 렌더링 할 수 있다. - map함수를 이용하여, jsx를 리턴하도록 하면 된다. - key를 지정하지 않으면, 웹페이지에서 경고가 난다. (오류는 안남) * 경고가 나오는 이유는 새로운 아이템이 추가될 때, 어느 인덱스에 추가가 될지 리액트가 모름 그래서 리액트가 추가될 배열의 모든 상태를 확인하는 작업이 생겨서 비효율적임 const Expense = (props) => { return( {props.items.map((expense) => ( //props.items..
![]()
【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 이벤트 핸들러 작성(클릭 시 이벤트) const clickHandler = () => { console.log("Clicked!"); // 클릭 시 실행되는 함수 작성 }; return( Change! // clickHandler() xxx ); ⭐ 함수를 호출할 때 이름만 작성해야한다. 함수 뒤에 괄호를 붙이면 jsx 코드가 리턴될 때 함수가 실행된다. 2. State ! ⭐⭐⭐⭐⭐ - state를 사용하기 위해선 react의 useState를 가져와야 한다. import React, {useState} from "react"; 1) state 사용 방법 - 컴포넌트 함수 내에서만 사..
![]()
【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 리액트를 사용하는 이유? - 리액트는 모든 요소들이 컴포넌트로 이루어져 있음 * 컴포넌트 : 재사용이 가능하고, 우려사항을 분리할 수 있음(=반복이 없고, 코드를 작고 관리할 수 있는 규모로 유지) 👉 생산성과 유지보수가 용이하다 👉 복잡하고 동적인 웹 어플리케이션에서 ui를 동적으로 나타내기 위해서는 많은 상태를 관리해야하는 부담이 생기는데 react가 이것을 해결해 준다. 👉 virtual DOM을 이용한 빠른 렌더링이 가능하다. * react/vue/angular중 선택해야하는 경우 [React] 내가 React를 선택한 이유 (tistory.com) [React] 내가 React..
![]()
【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. let과 const 1) let : es6 이전에 쓰던 var과 같음, 변수 2) const : 상수(처음 할당한 후 다시는 재할당 불가능) 2. 화살표 함수 : es6부터 쓰는 새로운 함수 선언 방식 const/let 함수이름 = (매개변수) => { // 함수 내용 } 함수이름(); // 함수 호출 아래와 같은 방식으로 리턴문을 생략가능하다 const mutiply = (number) => number*2 // number*2가 리턴됨 3. Exports, Imports 1) Exports : 다른 js파일로 내보내기 export default person; // default ex..
![]()
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 연결 선택자 1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 특정요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함 - 기준 요소를 기준으로 한 단계 아래 요소는 자식요소, 그 요소의 한 단계 요소는 손자요소 1) 하위 선택자 - 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함 section p { ..... } 상위요소 하위요소 2) 자식 선택자 - 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 section > p { .... } 부모요소 > 자식요소 2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 1) 인접 형제 선택자 - ..
![]()
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 배경색과 배경 범위 지정하기 1. 배경색 지정 : background-color background-color : #008000 | rgb(0,128,0) | green; /*16진수, rgb값, 색상이름 가능 2. 배경색의 적용범위 조절 : background-clip 종류 설명 border-box 박스 모델의 가장 외곽인 테두리까지 적용(기본값) padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스모델에서 콘텐츠 부분에만 적용 backgrond-clip : border-box | padding-box | content-box; 02 배경 이미지 지정 1. 웹 요..
![]()
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 문서 객체 모델 알아보기 1) 문서 객체 보델이란 - 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹문서를 체계적으로 정리하는 방법 2) DOM 트리 - 문서 객체 모델의 구조를 나타냄 - DOM을 구성하는 기본 원칙 모든 HTML 태그는 요소(Element) 노드 입니다. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다. 주석은 주석(comment) 노드입니다. 2. DOM 요소에 접근하고 속성 가져오기 1) DOM에 접근하기 ① id 선택자로 접근하는 getEl..
