odada

1. Props(Properties) 란?컴포넌트의 속성을 설정할 때 사용하는 요소이다.컴포넌트에게 전달되는 데이터를 의미한다.Components로 고양이를 계속 만들어낼 수 있다면...Props로 서로 다른 고양이를 만들어낼 수 있다.이미지 출처2. Props의 특징컴포넌트의 속성(props)은 컴포넌트를 사용할 때 설정하는 속성컴포넌트의 속성은 부모 컴포넌트에서 설정할 수 있다.컴포넌트 내부에서는 설정할 수 없음{}를 사용하여 자바스크립트 표현식을 속성 값으로 설정할 수 있음- Props.children (props.속성이름)컴포넌트 태그 사이에 작성한 내용을 조회할 때 사용한다.컴포넌트 태그 사이에 작성한 내용은 props.children이라는 props로 전달된다.// App.jsimport Re..

React에서 GSAP 사용하기 GSAP 설치하기 npm install gsapGSAP 사용하기 import { gsap } from 'gsap'; gsap.to('.box', { x: 100 }); GSAP을 전역으로 사용하기 위해선 index.js에 아래 코드를 추가해야 한다. // index.js import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); GSAP을 사용할 header.jsx 파일을 만들고 아래와 같이 코드를 작성한다. 스크롤 이벤트 핸들러를 만들어서 스크롤이 100px 이상이면 헤더의..

리액트 ES6 문법 정리 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. let value = 1 console.log(value) // 1 value = 2 console.log(value) // 2 const a = 1 a = 2 // 에러 발생 2. 템플릿 문자열 (Template String) 템플릿 문자열은 문자열 안에 변수와 연산식을 넣을 수 있습니다. const string1 = '안녕하세요.'; const string2 = '김겨울입니다.'; const greeting = ${string1} + ' ' + ${string2}; // 병합 연산자를 사용한 문자열 연결 const cat = { kind: '러시안블루',..

모듈(Module)모듈이란?모듈은 특정 기능을 하는 함수나 변수들의 집합이다.모듈은 가져오기(import)와 내보내기(export)를 통해 사용할 수 있다.모듈은 자체로도 하나의 프로그램이지만 다른 프로그램의 일부로 사용될 수도 있다.모듈은 다른 모듈을 사용할 수 있고, 다른 모듈에 의해 사용될 수도 있다.모듈은 자신만의 이름 공간(namespace)을 가진다.모듈은 독립성을 가지며, 필요한 모듈만 불러와 사용할 수 있다.모듈은 재사용이 가능하다.모듈의 종류내장 모듈Node.js가 설치될 때 함께 설치되는 모듈fs, os, path, url 등사용자 정의 모듈개발자가 직접 정의한 모듈다른 프로그램에서도 사용할 수 있도록 npm에 배포할 수도 있다.모듈의 사용모듈을 사용하기 위해서는 모듈을 내보내기(exp..

표준 내장 객체 - 객체(object) Object.assign() 객체를 복사할 때 사용 target 객체에 source 객체를 병합하여 반환한다. const target = { x: 1, y: 2 }; const source = { y: 3, z: 4 }; const result = Object.assign({}, target, source); // {}는 타겟 객체를 빈 객체로 초기화한다. console.log(result); // { x: 1, y: 3, z: 4 } 중복된 속성은 덮어쓴다. console.log(target); // { x: 1, y: 3, z: 4 } (타겟 객체) console.log(source); // { y: 3, z: 4 } (소스 객체) // 전개 연산자를 사용해도 ..

표준 내장 객체 - 배열(array).length배열의 길이(숫자)를 나타내는 속성const arr = [1, 2, 3];console.log(arr.length); // 3.at()배열에서 특정 위치의 요소를 가져오는 메서드인덱스는 0부터 시작const arr = [1, 2, 3];console.log(arr[0]); // 1console.log(arr.at(0)); // 1console.log(arr[arr.length - 1]); // 3console.log(arr.at(-1)); // 3.concat()배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr3 = [...arr1, ...arr2..

표준 내장 객체 - 날짜(Date) Date 객체 날짜와 시간을 위한 메서드를 제공하는 내장 객체 Date 객체 생성 // 현재 시간으로 Date 객체 생성 const now = new Date(); console.log(now); // 2021-07-20T07:23:45.000Z // 2021년 7월 20일 7시 23분 45초로 Date 객체 생성 const date1 = new Date(2021, 6, 20, 7, 23, 45); console.log(date1); // 2021-07-20T07:23:45.000Z .getFullYear() / .getMonth() / .getDate() / .getDay() 년도, 월, 일, 요일을 얻는 메서드 getMonth()는 0부터 시작하므로 1을 더해줘야 ..

숫자(number).toFixed()숫자를 고정소수점 표기법으로 변환하여 문자열로 반환합니다.const num = 3.1415926535;console.log(num.toFixed(2)); // 3.14console.log(typeof num.toFixed(2)); // stringconsole.log(parseFloat(num.toFixed(2))); // 3.14 (문자열을 숫자로 변환).toLocalString()숫자를 표준 숫자 형식의 문자열로 변환합니다.const num2 = 10000000;console.log(num2.toLocaleString()); // 10,000,000console.log(`${num2.toLocaleString()}원`); // 10,000,000원Number.isI..

표준 내장 객체 - 문자열(string) string(문자열) const str = 'hello world'; length 문자의 길이를 반환한다. console.log(str.length); // 11 .includes() 문자열에 특정 문자열이 포함되어 있는지 확인한다. console.log(str.includes('hello')); // true console.log(str.includes('Hello')); // false (대소문자 구분) console.log(str.includes('hello', 1)); // false (1번째 인덱스부터 시작) .indexOf() 문자열에 특정 문자열이 포함되어 있는지 확인한다. 포함되어 있으면 해당 문자열의 인덱스를 반환한다. 없으면 -1을 반환한다. c..

React Table Data 아래 이미지와 같은 테이블을 만들어보자. table의 데이터는 배열로 만들어서 map()을 사용 map()을 사용할 때는 key값을 넣어줘야 한다. map()을 사용할 때는 () => ()를 사용한다. 1. Table Data 만들기 import { Card, CardHeader, Heading, CardBody, Table, TableCaption, Thead, Tbody, Tr, Th, Td, TableContainer, Image, } from '@chakra-ui/react'; import apple from '../../assets/img/apple.png'; import android from '../../assets/img/a..