reactNative - ES6, React 문법 리마인드

1. ES6

1) string literal

`${변수명} 변수가 아닌 문자열은 그냥쓰기`

 

2) for of

배열의 키가 아닌 value 값에 접근해서 반복한다.

key 가 자동생성되는 경우(배열에서만) 사용 가능.

key를 직접만드는 객체의 경우에는 사용 불가능(이 경우 for in 사용)

 

3) rest operator

파라미터로 받으려는 인수의 갯수 이상으로 인자를 넘겨줄 경우, 배열로 묶여서 맨 마지막 인수로 들어간다.

맨 마지막 인수에만 사용가능.

function printValue(v1, v2, ...v3){
	console.log(v1, v2, v3);
}

print(1,2,3,4,5);
// 1 2 [3, 4, 5]

 

4) spread operator

(1) 함수 호출시 인수로

function sum(x, y, z){
	return x + y + z;
}
let arr = [1, 2, 3];

console.log(sum(...arr)); // 6
console.log(sum(10,...arr,4,5,6)); // 31

 

(2) 배열에서

let computer = ['monitor', 'mouse', 'keyboard'];
let room = ['desk', ...computer, 'chair'];
console.log(room);
// desk, monitor, mouse, keyboard, chair

 

(3) 배열 복사할 때

배열의 값만 복사하면서 새로운 배열을 만들고 싶을 때. (서로 참조하지 않도록)

let aaa = [1, 2, 3];
let bbb = [...aaa];
bbb.push(4);

console.log(aaa)// [1, 2, 3]
console.log(bbb)// [1, 2, 3, 4]

 

(4) 객체에서

let abc = {
    a: 'A',
    b: 'B',
    c: 'C'
}

let de1 = {
	d: 'D',
    e: 'E',
    ...abc
}

let de2 = {
	d: 'D',
    e: 'E',
    abc
}

console.log(de1) // d: 'D', e: 'E', a: 'A', b: 'B', c:'C'
console.log(de2) // d: 'D', e: 'E', abc:{a: 'A', b: 'B', c: 'C'}

 

2. React

1) state

- component 에서 렌더링되는 데이터를 담고 유지하는 javascript 객체

- class component 안에서 사용가능.

- 함수컴포넌트 안에서는 사용 불가능.

- render 함수 바깥에서 정의.

- setState() 함수로 값 변경 가능.

- setState() 함수를 통해 데이터를 변경할때에는 현재버전을 카피한 후에 업데이트를 진행하기때문에 업데이트하기 전의 현재버전값을 가져올 수 있다. = preveState

 

 

 

 

 

 

 

+)

Q:

"import { View, Text } from 'react-native'; "

위와 같이 임포트한 View, Text 태그를 태그채로 사용하려면 함수든 return 이든 소괄호속에서만 사용가능한 이유가 뭘까?

 

A: 

JSX컴포넌트를 리턴하려면 소괄호 사용해야함.

JSX 컴포넌트를 리턴하지 않을 경우에는 중괄호를 사용해야함.

소괄호 사용하고 JSX컴포넌트를 리턴하지않으면 컴파일에러 발생.

// JSX (javascript xml 의 약자) : 태그로 감싸져 변수에 할당되는 표현식.
const example = <tag> hello </tag>

// 중괄호사용
exampleFunc1 = () => {
	if(a) {
    	console.log("a");
    }
}

// 소괄호사용
exampleFunc2 = () => (
	<View>
    	<Text></Text>
    </View>
)