728x90 반응형 SMALL 기술 개발74 고차함수(2) - Array.prototype.filter filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, 콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. (원본 배열은 변경되지 X) const numbers = [1, 2, 3, 4, 5]; const odds = numbers.filter(item => item % 2); console.log(odds); // [1, 3, 5] forEach vs map vs filter forEach 메서드: 언제나 undefined를 반환, map 메서드: 콜백함수의 반환값들로 구성된 새로운 배열을 반환, filter 메서드: 콜백 함수의 반환값이 true인 요소만 추출한 새로운 배열을 반환 arr.filter(callback(eleme.. 2022. 8. 3. React Hooks (useState) 1. useState 정의 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다 useState의 기본적인 형태 const [state, setState] = useState(initialState); state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있다. 그리고 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 2. 함수형 업데이트 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다. // 일반 사용법 setState(number + 1.. 2022. 8. 3. 고차함수(1) - Array.prototype.map map 메서드는 자신을 호출한 배열의 모든 요소 각각을 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. (원본 배열은 변경되지 X) const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] forEach vs map - forEach 메서드와 map 메서드의 공통점: 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 것 - forEach: 언제나 undefined 반환 -> 반복문을 대체하기.. 2022. 8. 2. 스프레드 문법 Spread 라는 단어의 의미: 펼치다, 퍼뜨리다 스프레드 문법(전개 문법)은 ES6에 도입된 문법으로, ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법의 결과물은 값으로 사용할 수 없고, 쉽표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 1. 함수 인수 목록( myFunction (a, ...iterableObj, b) ) 2. 배열 리터럴( [ 1, ...iterableObj, '4', 'five', 6 ] ) 3. 객체 리터럴( { ...obj, key: 'value' } ) 1. 함수 호출문의 인수 목록에서 사용하는 경우 - apply() 배열의 요소를 함수에 대한 인수로 사용하려는 경우에 사용하는 것이 일반적이다. functio.. 2022. 8. 2. 템플릿 리터럴(ES6) ES6부터 새로운 문자열 표기법인 Template Literal이 도입되었다. 템플릿 리터럴은 작은따옴표(' ')나 큰따옴표(" ")같은 일반적인 따옴표 대신, 백틱(` `)을 사용해서 표현한다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` 템플릿 리터럴의 문자열 처리 기능 3가지를 소개하려고 한다. (이 외에도 많으니 MDN을 참고하길 바람) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals 1. 멀티라인 문자.. 2022. 7. 30. 컴포넌트 꾸미기 (CSS-in-JS) 1. CSS-in-Js란? (1) css-in-js란 무엇인가? 자바스크립트 코드에서 CSS를 작성하는 방식 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다. CSS-in-JS 방식을 사용하기 위해 styled-components 라는 패키지를 사용합니다. (2) styled-components란? styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지! styled-components 외에도, emotion, tailwindcss 가 있지만 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지다. 2. styled-components 준비하기 (1) VScode 플러그인 설치 (2) yarn 에서 styled-.. 2022. 7. 30. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음 728x90 반응형 LIST
