그룹스터티 - 1주차 리액트 필기

import {Text, View, StyleSheet, Alert, TouchableOpacity,Button, ScrollView, TextInput} from 'react-native'

import {useState} from 'react'

JS 변수명 규칙

•  문자, 숫자, 밑줄 및 달러 기호 포함 가능
• 문자로 시작해야함(숫자로 시작 불가)
• $와 언더바로 변수명 시작 가능하다
• 대소문자 구별하고 예약어는 사용불가

var 

var a = 100;
console.log(a) // 결과값 100

var a = 200;
console.log(a) // 결과값 200

var a = 300;
console.log(a) // 결과값 300

 

var를 사용하면 위와 같이 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않는다. 첫번째와 두번째 넣은 100, 200은 초기화되고 가장 마지막에 넣은 300만 값으로 저장된다. 유연한 변수 선언이 가능하다고 하기엔 중복 선언의 위험이 더 크기 때문에 단점으로 여겨진다. ES6 이후에 이 문제를 보완하기 위해서 let과 const가 추가되었다. 

 

let 

변수명을 중복으로 선언하면 아래와 같이 에러가 발생한다. 하지만 값을 재할당 하는 것은 가능하다. 

 

let a = 100;
consolel.log(a) // 결과값 100

let a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가 

a = 300;
consolel.log(a) // 결과값 300
// 값을 재할당 하는 것은 가능

 

const 

변수명을 중복으로 선언하면 let과 같이 에러가 발생한다. let과 다른 점은 값을 재할당 하는 것도 불가능하다는 점이다. 처음에 한 번 선언하고 나면 다른 값을 넣을 수 없기 때문에 보통 const는 상수를 선언하는 키워드로 사용된다.

 

const a = 100;
consolel.log(a) // 결과값 100

const a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가

a = 300; // 에러 발생
// Assignment to constant variable.
// 값을 재할당 하는 것도 불가

 

이 외에 var는 함수 레벨 스코프, let과 const는 블록 레벨 스코프라고 하는데 아직 함수를 제대로 이해하지 못해서 이 부분은 추후에 다시 포스팅을 하도록 하겠다. 

 

다시 한 번 정리하자면 var는 중복 선언, 재할당이 모두 가능하고, let은 재할당만 가능, const는 모두 불가능하다. 헷갈리니 그냥 뭐 쓰면 되는지만 말해줘 - 하는 사람이 있다면... 값을 재할당할 필요가 있으면 let, 없으면 const 쓰면 된다. 

 

Data Type

Six Primitive Data Type - Boolean, Null, Undefined, Number, String, Symbol - 값을 전달한다

new String("")라는 함수로 객체 생성 시 DataType은 Object타입이다

var x = "John"  - String

var y = new String("'John") - Object

(x===y)  => false

 

pass by reference - 주소값 전달 - 주소값 전달로 복사 시 값을 수정하면 원본의 데이터가 수정되도록 하는 방식

 

Comparison Operator== -> 값 비교=== -> 값과 데이터 타입 비교

 

JS는 런타임 할떄 타입이 정해지기에 펑션 정의할 떄 리턴타입을 정의 할 필요가 없다

 

JS함수 선언과 동시에 즉시 실행하는 방법

 

 

 

일반 function을 Arrow function으로 변환

같은 함수 선언 Arrow function 자동 리턴 중요!!!

//기존의 function sample
var double = function(x){
    return x*2;
}
//arrow function sample
const double = (x) => {
    return x*2;
}
//매개변수가 1개인 경우 소괄호 생략 가능
const double = x => {return x*2}
//함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨
const double = x => x * 2
//매개변수가 두 개 이상일 때
const add = (x,y) => x + y
//매개변수가 없을 때
() => {    ... }
//객체변환할 때 중괄호 사용
() => {return {a:1};}
//return 바로할땐 소괄호 사용
() => ({a:1})

 

---

 

Rest Parameter

Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

함수에 전달된 인수들은 순차적으로 파라미터와 Rest 파라미터에 할당된다.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

 

 

3. Spread 문법

Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블이어야 한다.

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3

// 문자열은 이터러블이다.
console.log(...'Hello');  // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

 

Array는 pass by reference 이기에  arr1의 주소값을 넘겨받은 accCopy_1을 수정하면 arr1은 값이 변경하지만 Spread Operator로 값 복사한 arrCopy는 영향을 받지 않았다

 

Rest와 헷갈리지 않기!

Rest는 함수 선언문의 파라미터에 Spread(...)연산자를 이용해서 받으면 가변인자를 받아 배열로 만들어서 사용하는 것이고, 함수 호출문의 파라미터에 Spread(...)연산자를 이용해서 호출하면 배열이 해당 매개변수로 각각 매핑되는 것은 다르다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//Rest function foo(param, ...rest) {   console.log(param); // 1   console.log(rest);  // [ 2, 3 ] } foo(1, 2, 3);   //Spread호출 function bar(x, y, z) {   console.log(x); // 1   console.log(y); // 2   console.log(z); // 3 } bar(...[1, 2, 3]);

- 또한 Rest에서는 선언에서 Spread연산자를 제일 뒤에만 써야하지만, Spread호출에서는 중간중간 사용해도 상관없다.

---

 

App.js - 프로그램 시작 포인트

assets folder - 이미지나 자원 관리 파

components folder - 컴포넌트 관리 폴더

 

Inline 스타일

인라인 스타일은 HTML에서 태그 안에 스타일 속성을 추가할때 사용했다.
마찬가지로 리액트에서 컴포넌트 / 일반 태그 안에 스타일 속성을 줄 수 있다.
단, JSX 문법에 의해서 HTML에 적용하던 방법과는 다르다.

• style에 대한 value는 객체 형태이다.
• CSS 속성 이름은 카멜 케이스로 한다.
• js코드이기에 1번쨰 {} style은 항상 object 데이터타입만 받기에 2번쨰 {} 총 2개 필

import React from 'react';

const PracticeStyle = () => {
  return (
    <div style={{marginTop: 10px; backgroundColor: red}}>
      스타일을 적용해보자.
    </div>
  );
}

export default PracticeStyle

 

StyleSheet 스타일

StyleSheet 또한 js코드이기에 1번쨰{} Object 데이터 타입만 받기에 mainView의 값 또한 {}로 묶어주어 5번쨰 줄에서 Object 데이터 형태로 반환하게 만든다

 

---

useState

import

import { useState } from 'react';

변수 선언

const [temp, setTemp] = useState(0);  		// 초기값을 0으로 설정
const [temp, setTemp] = useState('');  		// 초기값을 ''으로 설정
const [temp, setTemp] = useState(false); 	// 초기값을 false로 설정
const [temp, setTemp] = useState([]);  		// 초기값을 빈 배열로 설정

초기값은 여러 타입으로 선언할 수 있다.

state 변수 값 변경 - set함수 사용 - Setter 역

setTemp(1); 						// state의 값을 1로 변경
setTemp('javascript'); 				// state의 값을 'javascript'로 변경
setTemp(true); 						// state의 값을 true로 변경
setTemp(['A', 'B', 'C', 'D', 'E']); // state의 값을 값이 들어있는 배열로 변경

초기값 타입과 다른 타입으로 변경 가능

Re-render

setState 함수를 이용해서 state의 값을 변경할 때마다 컴포넌트가 다시 렌더링되어서 화면이 업데이트된다.
아래 예시는 버튼을 눌렀을 때 실시간으로 숫자가 변하는 것을 볼 수 있다.

import React, { useState } from "react";

const Example = () => {
  const [temp, setTemp] = useState(0); // 초기값을 0으로 설정
  
  const increaseCnt = () => {
    setTemp(temp + 1); // temp += 1
  };

  return (
    <>
      <h1>{ temp }</h1>
      <button onClick={ increaseCnt }>1 증가</button>
    </>
  );
};

export default Example;

Props

props란 부모 컴포넌트에서 자식 컴포넌트로 값을 전달해주는 것을 의미합니다.

예를 들어서, MyName이라는 컴퍼넌트를 만들고, 부모 컴퍼넌트인 App에서 props의 값을 HTML로 보여준다고 하면 코드는 아래와 같습니다.

() 는 return문이 필요없는 대신 무조건 적으로 () 안에 있는걸 리턴하고
{}는 return 문이 필요한 대신 리턴은 선택 

map() - for loop와 동일

map()

const numbers = [1, 3, 5];
const listItems = numbers.map((number, idx) => {
    console.log(number);
});

Touchableopacity

• Touchableopacity태그 내 모든 영역들은 이벤트에 영향을 받음

Button

• title - 버튼이름을 지정하는 props
• onPress - 버튼 클릭될 떄 이벤트 발생시키는 props

InputText

• from 'react-native'
• value - 화면 표시해주는 props
• onChangeText - 텍스트가 바뀔떄마다 이벤트를 발생시키는 props
• multiline - 다중라인 사용
• editable - 수정 여부 true(가본) - 수정 가능, false - 수정 불가
• maxLength - 글자 수 제한