React - 변수, 함수, 템플릿 리터럴

변수와 상수

상수

정의

• 선언된 이후에 값의 변경이 불가능한 변수

선언 방법

• const 변수명 = 값
• 예시 코드

const CV = 1.23;

특징

• 선언 이후에 값의 변경이 불가능하다
  • 단, 객체나 배열일 경우 내용의 변경이 가능하다

변수

정의

• 선언 된 이후에 값의 변경이 가능한 값

선언 방법

• let 변수명 = 값
• 예시 코드

let CV = 1.23;

공통 특징

• 블록 범위를 가진다

  • {} 내부에 상수를 선언 할 경우, 블록 외에서는 호출이 불가능함
  • 하위 블록 내에서 접근이 가능하다

  let varA = 10;
  if(varA > 10){
      console.log(varA);
  }
  

함수

### 선언 방법

1. 일반적인 방법

function 함수명(변수명) {}

예시 코드

function Calc(x) {
return x * 2;
}

2. 화살표 함수

• 주의) ES6부터 사용 가능함
• 매개변수가 하나일 경우, 괄호의 생략이 가능함
• 함수의 본문이 식일 경우에는 return가 필수가 아님

• 함수의 매개변수가 없을 경우, ()와 같이 빈 괄호를 지정해야 한다

• 선언 방법: 변수명 = 매개변수 => 반환문

예시 코드

//매개변수가 하나일 경우
let Calc = x => x * 2;

//매개변수가 여러개일 경우
let Calc = (a, b) => {
    return a * b;
}

호출 방법

• 함수명(매개변수);
• 주의) 매개변수가 여러개일 경우, 인수를 괄호 안에 넣고, 쉼표로 구별해야한다

예시 코드

Calc(5)
Calc(5,10);

템플릿 리터럴

정의

• MDM web docs에 따르면 템플릿 리터럴(Template Literals)는 내장된 표현식을 허용하는 문자열 리터럴¹이라고한다.

• 자바스크립트에서 문자열을 결합하는 일반적인 방법은 + 연산자를 이용하는 것이다.

  • 예시 코드

  let name = {firstName : 'Minsu', lastName : 'Kim'};
  let greeting = "Hello, " + ${name.firstName}+ ${name.lastName};
  

• 템플릿 리터럴을 이용할 경우에는 백틱(``)를 이용하여 사용 가능하다

  • 예시 코드

  let name = {firstName : 'Minsu', lastName : 'Kim'};
  let greeting = `Hello, ${name.firstName} ${name.lastName}`;
  

---

참고한 자료

컴포넌트 State

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발.

1. 큰따옴표(“)로 둘러쌓인 문자의 집합 ↩