출처 - 리액트를 다루는 기술(김민준 지음) 이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것 예) 버튼에 마우스 커서 올렸을 때 -> onmouseover 이벤트 클릭했을 때 -> onclic 이벤트 Form 요소의 값이 바뀔 때 -> onchange 이벤트 리액트에서의 이벤트 시스템 1. 이벤트 이름은 카멜 표기법을 사용한다 HTML은 onclick 이지만 리액트는 onClick HTML은 onkeyup 이지만 리액트는 onKeyUp 2. 이벤트에 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체를 전달 즉, 중괄호 안에 함수명만 넣음 -> () 안붙임 예시 import React, { useState } ..

📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/136798 📍알고리즘 분류 - 수학 - 구현 📍문제 풀이 1 ~ N까지 각 자연수의 모든 약수의 갯수를 빠르게 구하는 문제 약수의 갯수를 빠르게 구하려면, 제곱근을 사용하면 된다 예를 들어, 100의 약수를 구한다고 생각해보면, 100의 제곱근은 10이다. 전체 약수는 1, 2, 4, 5, 10, 20, 25, 50, 100 인데 1, 2, 4, 5, 10 까지만 구해도 나머지 약수를 계산할 수 있다 이를 잘 구현하면 된다 📍코드 (JavaScript) function solution(number, limit, power) { const answer = [1]; // 1의 약수는 1이므로..

출처 - 리액트를 다루는 기술(김민준 지음) state를 컴포넌트 내부에서 사용하는 것 뿐만 아니라 자식 컴포넌트로 전달하여 실시간으로 다시 렌더링되도록 하는 것도 가능하다. // Greeting.js import React from 'react'; // state를 전달받기 때문에 괄호로 감싸줘야 한다 const Greeting = ({ username }) => { return {username}님 안녕하세요.; } export default Greeting; import React, { useState } from 'react'; import Greeting from './Greeting'; function App() { const [username, setUsername] = useState(''..

출처 - 리액트를 다루는 기술(김민준 지음) 리액트 16.8 이후 부터는 useState 함수를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됐다 이 과정에서 Hooks를 사용하게 된다 state의 값을 업데이트 할 때는, state 값에 직접 접근하면 안됨. setState 또는 세터 함수로 값을 변경해야 한다 (그렇지 않으면 바뀐 값이 렌더링 X) (1) useState 사용하기 Say.js 파일을 생성한다 useState로 state 값을 바꿀 때는 useState를 통해 전달받은 세터 함수를 사용한다 // Say.js import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useS..

출처 - 리액트를 다루는 기술(김민준 지음) state와 props 비교 state와 props 모두 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있지만 역할은 다르다. state : 컴포넌트 내부에서 바뀔 수 있는 값 (컴포넌트 내부에서 값을 업데이트 가능) props : 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값 (컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다) 리액트에는 2가지 종류의 state가 있다 1. 클래스형 컴포넌트의 state 2. 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state (1) 클래스형 컴포넌트의 state Counter.js 파일을 생성한다 constructor 메서드를 사용하여 state를 생성할 수도 있지만 굳이 그러지..

출처 - 리액트를 다루는 기술(김민준 지음) props 사용하기 (5) propTypes를 통한 props 검증 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 propTypes를 사용한다. propTypes를 사용하려면 우선 import가 필요하다 // MyComponent.js import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = ({ name, children }) => { return ( 안녕하세요, 제 이름은 {name}입니다. children 값은 {children} 입니다. ); }; MyComponent.defaultProps = { name: '기본 이름', }; MyCom..

출처 - 모던 자바스크립트 Deep Dive (이웅모 지음) 1. Date.now() 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다. Date.now(); // 1654695167189 2. Date.parse() 1970년 1월 1일 00:00:00(UTC)부터 인수로 전달된 시간까지 경과한 밀리초를 숫자로 반환한다. Date.parse('Jan 2, 1970 00:00:00 UTC'); // 86400000 Date.parse('Jan 2, 1970 09:00:00'); // 86400000 Date.parse('1970/01/02/09:00:00'); // 86400000 3. 연, 월, 일, 요일 관련 (1) Year getFullYear(..

출처 - 모던 자바스크립트 Deep Dive (이웅모 지음) 1. Date 생성자 함수 Date 생성자 함수는 new 연산자를 쓰냐 쓰지 않냐에 따라 다른 결과를 출력한다 new Date(); // Wed Jun 08 2022 21:38:55 GMT+0900 (한국 표준시) Date(); // 'Wed Jun 08 2022 21:39:38 GMT+0900 (한국 표준시)' new Date()는 현재 날짜와 시간을 가지는 Date 객체를 반환한다. (Date 객체는 본래 정수값이지만, 콘솔에 출력하면 날짜와 시간 정보를 출력한다) 반면, Date()는 현재 날짜와 시간을 문자열로 반환한다. 2. new Date(밀리초) Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00..