개발야옹

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)

Typescript를 사용할 때는 .ts

React Component의 경우 .tsx 

public 

public은 default값이다. 생략이 가능하다.

class User{
	public name : string = "kim";
    // public => 모든 자식들이 name을 이용가능하다.
    // public keyword는 생략 가능 default 값이다.
    // public <-> private
	constructor(a : string){
    	this.name = a; 
    }
    
    public 함수(){
    	console.log(this.name);
    };
}

let user1 = new User("park");
user1.name = "Lee";

public은 축약을 제공하기도 한다. 

class User{
	constructor( public name : string, public age : number){
    }
}

let user1 = new User("Yeonji", 22);
console.log(user1); // { name : "Yeonji", age : 22 }

private

class 내부에서만 사용이 가능하며, class 외부에서는 직접적으로 접근이 불가능하다. 또한, extends로 해당 class를 상속받은 자식 class도 사용이 불가능하다.

class User{
	private name : string = "kim";
    // private => class 내부에서만 사용가능하게 된다. 자식들이 직접 사용 불가능.
	constructor(a : string){
    	this.name = a; 
    }
    
    public ChangeName(a : string) : void{
    	this.name = a;
    };
}

let user1 = new User("park");
user1.name = "Lee"; // error 발생
user1.ChangeName("Lee"); // success

protected

protected는 private keyword와 같이 class{} 내부에서만 사용이 가능하다. 그러나 private과 반대로 extends로 상속받은 class 내부에서도 사용이 가능하다.

class Parent{
	protected x = 10;
    private y = 30;
}

class Baby extends Parent{
	doIt(){
    	this.x = 30; // success
        this.y = 20; // error
    }
}

static

static ketyword를 붙은 것은 자식에게 물려주지않음. 부모 class만 사용이 가능하다.

static은 private, public, protected와 동시에 사용이 가능하다.

class Person{
	static x = 10;
    y = 100;
}

let person1 = new Person();
console.log(person1); // x 는 보이지 않음