mellowg

Array.prototype.includes() 

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별하는 메서드이다.

구문

arr.includes( valueToFind [, fromindex])

매개 변수

• valueToFind : 탐색할 요소
  • includes는 문자나 문자열 비교시 대소문자를 구분한다. 
  • fromIndex ( option ) : 배열에서 searchElement 검색을 시작할 위치이다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색한다. 기본값은 0이다.

반환 값

boolean

예제 코드

const arr = ["Alice", "Bob","Kitez"];

console.log(arr.includes("alice")); // false
console.log(arr.includes("Alice")); // true
console.log(arr.includes("Alice",-1)); // false

[+] 나중에 참고하면 좋은 블로그

https://hianna.tistory.com/403

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Array.prototype.filter()

filter()는 주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드이다.

구문

arr.filter( callback ( element[, index[, array]])[, thisArg])

매개변수

• callback : 각 요소를 필터링할 조건을 담고 있는 함수로 boolean을 반환한다. 반환 값이 true이면 값을 유지하고 false이면 요소를 삭제한다.
  • element : 처리할 현재 요소
  • index ( option ) : 처리한 현재 요소의 인덱스
  • array ( option ) : filter를 호출한 배열
  • thisArg ( option ) : callback을 실행할 때 this로 사용하는 값

반환 값

callback 함수로 걸러진 새로운 요소들로 이루어진 배열을 반환한다. 어떠한 요소도 조건을 통과하지 못했을 경우 빈 배열을 반환한다.

예제 코드

// 예제 코드
// 2의 배수만 남기기

let arr = [1,2,3,4,5];

arr = arr.filter( i => {
   return i % 2 === 0;
});

console.log(arr); // [2, 4]

▶ map과 filter의 공통점

    : 기존배열은 수정하지 않고 요소들을 순환하면서 새로운 배열을 반환한다.

▶ map과 filter의 차이점

    : map은 콜백함수의 내용을 기존의 요소에 적용하여 새로운 요소를 생성/반환

    : filter는 콜백함수의 조건문을 만족하는 요소들을 반환

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://velog.io/@tjdud0123/javascript-map-filter-%ED%95%A8%EC%88%98

Array.prototype.map()

map()는 Array의 내장 함수로 배열 내의 모든 요소 각각에 대해 주어진 callback 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

구문

arr.map( callback( currentValue[, index [, array]])[, thisArg])

매개변수

• callback : 새로운 배열 요소를 생성하는 함수
  • currentValue : 처리할 현재 요소
  • index ( Option ) : 처리할 현재 요소의 인덱스
  • array ( Option ) : map을 호출한 배열
  • thisArg ( Option ) : callback을 실행할 때 this로 사용되는 값

반환 값

배열의 각 요소에 대해 callback 함수를 실행한 결과를 모두 모은 새로운 배열 (undefined 도 포함한다.)

예제 코드

// 예시 코드

let arr = [1,2,3,4,5];

console.log(arr); // [1,2,3,4,5]

arr = arr.map( number => {
   return number *= 2;
});

console.log(arr); // [2,4,6,8,10]

// 문자열로 바꾸기
arr = arr.map(String);
console.log(arr); // ['2', '4', '6', '8', '10']

출력 결과

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

• 일반 CSS
• Sass
• CSS Module
• styled-components

Sass

확장자 : .scss, .sass

import : import '저장경로';

.scss => 중괄호 세미콜론 사용

.sass => 중괄호 세미콜론 사용 X

Sass도 CSS Module로 사용이 가능하다. => 확장자 .module.scss

Sass 를 사용하기 위해서는 node-sass library를 설치해줘야 한다. 

설치

yarn add node-sass

Sass는 변수 정의를 허용한다. 변수는 $로 시작하며 변수 할당은 콜론 ( : ) 으로 마무리한다.

scss 스타일

$primary-color : #ffffff;
$primary-background : #efaba2;

.content{
	background : $primary-background;
    color : $primary-color;
}

sass 스타일

$primary-color : #ffffff
$primary-background : #efaba2

.conten{
	background : $primary-background
  	color : $primary-color

컴파일 결과

.content{
	background : #efaba2;
    	color : #ffffff;
}

CSS Module

확장자 : .module.css

import : import styles from '저장 경로';

css를 불러와서 사용할 때 className을 고유한 값, 즉 [ 파일 이름 ]_[ 클래스 이름 ]_[ 해시값 ] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지한다.

확장자를 .module.css 로 저장을 하면 자동으로 CSS Module이 적용된다.

해당 클래스는 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다. 

import하고 styles를 console.log로 찍어보면 { key : value } 형태로 불러와 지는 것을 확인할 수 있다.

[ + ] classnames

classnames는 props값에 다라서 다른 style을 주기 쉽게 하기 위한 라이브러리이다. 

CSS Module을 사용할 때 classnames 라이브러리를 함께 사용하면 여러 클래스를 적용하고, 조건부를 설정할 때 편리하다.

설치

yarn add clssnames

classnames 간단한 사용방법

import cn from 'classnames';

cn( 'one' , 'two' ); // = "one two"
cn( 'one' , { two : true } ); // = "one two"
cn( 'one' , { two : false } ); // = "one"
cn( 'one' , [ 'two', 'three' ] ); // = "one two three"

const myClass = "hello";
cn('one', myClass, { myCondition : true } ); // = "one hello myCondition"

styled-components

import : import styled from "저장 경로";

설치

yarn add styled-components

CSS in JS Library로, styled-components를 대체할 라이브러리로는 emotion이 있다.

JS file 안에 style을 선언하는 방식이다. 

사용방법

import styled from 'styled-components';

const Title = styled.h1`
	font-weight : 800;
    color : lightgreen;
`;

{...}

function App(){
	return(
    	<div>
        	<Title>안녕하세요!</Title>
        </div>
    )
}

export default App;

※ 만약 props를 사용하는 경우 styled-components에서 css를 불러와 Tagged 템플릿 리터럴을 사용해 주어야 한다.

[ + ] 반응형 디자인 media query 사용

참고 :

리액트를 다루는 기술 ( 책 )

https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)