도쿄에서 개발하기

useEffect 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다. useEffect(effect, [, deps]); 파라미터 effect함수 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.) effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다. deps 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열안에 그 값을 넣어준다. 예 ) name변수가 변경 될 때 useEffect(effect, [name]) 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때에만 실행 된다. componentDidMount 혹은 compon..

구문 자바스크립트의 splice 함수는 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환합니다. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 파라미터 start 배열의 변경을 시작할 index 배열의 길이보다 큰 값일 경우 배열의 길이로 설정 음수인 경우 배열의 끝에서부터 요소를 센다. 예 ) array.splice(-n) -> array.length -n과 같다. 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정 deleteCount(Optional) 배열에서 제거할 요소의 수 생략하거나 값이 array.length - start보다 클 경우 start 부터의 모든 요소를 제거 ..

구문 자바스크립트의 slice 함수는 원본 배열은 유지하고 begin부터 end까지(end 미포함)의 새로운 배열 객체를 반환합니다. arr.slice([begin[, end]]) 파라미터 begin(Optional) 추출 시작할 배열의 index 음수 index일 경우 배열의 끝에서부터의 길이를 의미 예) slice(-2)는 배열의 마지막 2개의 요소를 추출 값이 undefined일 경우 index 0과 동일 동작 배열의 길이보다 큰 index일 경우 빈 배열 반환 end(Optional) 추출 종료할 배열의 index, end index를 제외 하고 추출 예) slice(1, 4)는 두번째 요소부터 네번째 요소까지 (1, 2, 3) 추출 음수 index일 경우 배열의 끝에서부터의 길이를 의미 예) s..

구문 자바스크립트의 find 함수는 callback함수의 조건에 만족하는 첫번째 요소의 값을 반환합니다. arr.find(callback(element[, index[, array]])[, thisArg]) 파라미터 callback function 각 요소의 조건을 판단할 함수 다음 3가지의 인수를 가집니다. element - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 thisArg(Optional) callback함수를 실행할때 this로 사용되는 값 반환 값 배열 요소를 순회하며 callback 함수을 실행하고 결과가 true(조건에 만족)할 경우 요소의 값을 즉시 반환하고 순회를 멈춥니다. 만족하는 요소가 하나도 존재하지..

비구조화 할당/ 구조분해 할당이란? 배열이나 객체의 속성을 바로 개별 변수에 할당하는 JavaScript의 표현식입니다. 구문 1. 배열 const [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 2. 오브젝트 const { a, b } = { a: 10, b: 20 }; console.log(a); // 10 console.log(b); // 20 예제 1. 배열 / 오브젝트의 나머지 값 할당 cosnt arr = [10, 20, 30, 40, 50]; const [a, b, ...rest] = arr; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 5..

Hook이란 기존의 React에서는 클래스 컴포넌트를 작성해야만 상태(state) 값 관리 및 여러 React의 기능등을 사용할 수 있었지만 , React 16.8버전부터 추가된 Hook을 이용하면 함수 컴포넌트에서도 상태관리등이 사용가능 하도록 되었습니다. 그렇다고 해서 클래스 컴포넌트가 필요 없는 것은 아니며, 상황에 따라 적절히 맞춰 사용 가능합니다. useState Hook 기본적으로 배열 비구조화 할당문법으로 많이 사용 됩니다. [state, setState] = useState(initialState); 파라미터 initialState state의 초기값 설정 반환값 array (pair of values) 이 배열은 아래와 같은 2개의 값을 가지고 있습니다. 현재의 상태 값(state) 상태..

구문 자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다. arr.reduce(callback[, initialValue]) 파라미터 callback function 다음 4가지의 인수를 가집니다. accumulator - accumulator는 callback함수의 반환값을 누적합니다. currentValue - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환합니다. initialValue(Optional) 최초 callback함수 실행 시 ..

구문 자바스크립트의 filter함수는 배열의 각 요소를 순회하며 callback함수를 실행하며 조건에 맞는 요소만을 갖는 배열을 반환합니다. arr.filter(callback(element[, index[, array]])[, thisArg]) 파라미터 callback function 각 요소의 조건을 판단할 함수로 true를 반환하면 요소를 유지하고 false를 반환하면 제외합니다. 다음 3가지의 인수를 가집니다. element - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 thisArg(Optional) callback함수를 실행할때 this로 사용되는 값 반환 값 배열을 순서대로 불러 각 요소에 대해 callback 함..

구문 자바스크립트의 map함수는 callback함수 실행한 결과 반환값으로 배열의 길이, 순서를 유지한 새로운 배열을 만듭니다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 파라미터 callback function callback함수는 다음 3가지의 인수를 가집니다. currentValue - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 thisArg(Optional) callback함수를 실행할때 this로 사용되는 값 반환 값 배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과로 새로운 배열을 만듭니다. 예제 1. 배열 속 숫자의 제곱을 구..