클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트

import {Component} from "react";

class App extends Component {
  render() {
    return (
      <div>
      </div>
    );
  }
}

export default App;

클래스형 컴포넌트는 리액트의 모든 기능을 활용할 수 있다.

함수형 컴포넌트

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

함수형 컴포넌트는 기능이 부족했었다. state를 컴포넌트 내부에 만들 수 없다는 것과 라이프사이클 API도 사용할 수 없었다. 그래서 함수형 컴포넌트는 상위 컴포넌트가 전달하는 일만 단순하게 처리하는 역할이었다.

하지만, Hook이라는 개념이 도입되면서 함수형 컴포넌트에서도 state를 다룰 수 있고, 라이프사이클에 따라서 해야할 작업도 정의할 수 있게 되었다.

Props와 State의 차이

Props

간단히 하면 리액트에서 속성값을 나타내는 키워드이다.

App.js

import Content from "./components/Content";

function App() {
  return (
    );
}

export default App;

components/Content.js

function Content(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <img src={props.img} alt=""/>
      <p>{props.year}</p>
    </div>
  )
}

export default Content;

props를 사용한 간단한 예시로 부모 컴포넌트인 App.js로부터 props를 받고 자식 컴포넌트인 Content.js에서 사용한다. 다만 이 props는 상속받은 자식 컴포넌트 내에서 수정이 불가능하다. 이를 일방향성 상속이라고 한다.

State

State는 컴포넌트의 내부에서 선언되었으며 컴포넌트의 상태를 나타낸다.

App.js

import {Component} from "react";
import Content from "./components/Content";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
	      movie: {
        title: "클로저",
        img: "<https://the-take.com/images/uploads/screenprism/_constrain-480w/closer-3.jpg>",
        year: "2004"
      }
    }
  }

  render() {
    return (
    );
  }
}

export default App;

components/Content.js

function Content(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <img src={props.img} alt=""/>
      <p>{props.year}</p>
    </div>
  )
}

export default Content;

이는 state의 예제이다. App.js는 클래스형 컴포넌트로 작성되었다.

State와 Props 차이

State와 Props의 가장 큰 차이점은 props는 읽기 전용으로 수정이 불가하지만 State는 수정이 가능하다는 점이다.

또한 props는 함수형 컴포넌트, 클래스형 컴포넌트 모두 사용가능하지만 State는 클래스형 컴포넌트에서만 사용할 수 있었는데 리액트 16.8 버전부터 훅을 통해 구현이 가능하다.

undefined와 null 둘 다 Primitive Type(원시 타입)입니다.
우선 Primitive Type이 무엇인지 알아보고 이 둘의 차이점을 보겠습니다.

Primitive Type

다른 언어와 마찬가지로 JavaScript의 언어 타입도 크게 Primitive Type(원시 타입)과 Reference Type(참조 타입)으로 나뉩니다. 이 둘은 메모리에 저장되는 방식에 따라 나뉩니다.

Primitive Type과 Reference Type의 차이점은

1. Premitive Type은 실제 데이터 값을 저장하고 Reference Type은 객체의 번지 주소를 저장해 메모리 번지 값을 통해 객체를 참조하는 타입입니다.
2. Premitive Type은 변경 불가능한 Immutable Type이고, Reference Type은 변경이 가능한 가변성을 가진 mutable type입니다.

1번처럼 구분되는 이유는 사전에 얼만큼의 메모리를 할당할 수 있는지 알 수 있는 여부 때문입니다. 이걸 이해하기 위해서는 JavaScript나 Python 같은 동적 언어보다는 Java나 C 같은 정적 언어로 생각하면 편합니다.(동적 언어와 정적 언어의 설명은 아래 링크로 보면 이해되실 겁니다.) Java에서 Primitive Type인 정수는 4바이트 크기의 빈 방을 스택 메모리에 생성해서 사용합니다. 그래서 -2,147,483,648 ~ 2,147,483,647 사이의 정수만 입력이 가능합니다. 4바이트로 표현할 수 있는 숫자까지 저장할 수 있는 것입니다. 그래도 이렇게 Primitive Type의 경우 사전에 할당하는 메모리 크기를 정할 수 있는 자료형들입니다. 그래서 상대적으로 적은 용량이지만 액세스 속도가 매우 빠른 스택 메모리에 저장할 수 있는 것입니다. 하지만 만약 Reference Type인 객체를 저장한다고 하면 사전에 크기를 정하기 어렵습니다. 무작정 큰 저장 용량을 할당한다면 사용하지 않는 공간이 많아 메모리를 낭비할 수도 있고, 작은 저장 용량을 할당한다면 메모리가 부족해질 수도 있습니다. 그래서 액세스 속도가 느리지만 메모리 크기 제한이 상대적으로 여유로운 힙 메모리에 Reference Type을 저장합니다. 정확하게 Reference Type은 힙 메모리에 실제 데이터가 저장되어 있고 Stack메모리에는 Heap메모리의 주소가 저장되어 있습니다. 그래서 객체 번지 주소를 저장하는 것이죠. 이 설명이 자바스크립트에서도 크게 다르지 않습니다.

Primitive Type 종류

• Boolean 타입
• Undefined 타입
• Null 타입
• Number 타입
• BigInt 타입
• String 타입
• Symbol 타입

이러한 타입이 있고 이 중, Undefined 타입과 Null 타입에 대해 더 알아보겠습니다.

Undefined

undefined는 Primitive Type으로 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당됩니다.

let a;
console.log(a);
//--==>> undefined

이렇게 선언만 하고 할당을 하지 않을 경우는 undefined가 출력됩니다. 즉, undefined는 자료형이 정의되지 않았을 때의 상태입니다. 그래서 변수가 undefined라면 아직 변수에 값이 할당되지 않았음을 의미합니다.

Null

null도 Primitive Type으로 이전에 값은 할당되었었지만 값이 더이상 유효하지 않음을 나타낼 때 사용합니다.

let b = 3;
b = null;
console.log(b);
//--==>> null

이 예시처럼 변수 b가 더이상 기존 값(3)이 유효하지 않음을 의미합니다. null은 변수를 초기화할 때 사용합니다.

참고로 undefined == null은 true이지만, undefined === null은 false 입니다. 이를 통해서도 이 둘은 자료형이 각각 undefined과 null로 다르다는 것을 알 수 있습니다.

Event란?

이벤트란 간단하게 일어나는 사건 혹은 발생인데, 웹에서는 유저가 버튼을 클릭하거나 비디오 재생이 멈추는 등 이러한 다양한 사건들을 이벤트라고 할 수 있습니다.

Event Bubbling이란?

Event Bubbling이란 한 요소에서 이벤트가 발생했을 때 해당 이벤트가 부모 요소들로 전달되어 가는 특성을 말합니다.

<form onclick="alert('form')">
	form
	<div onclick="alert('form 안에 있는 div')">
		form 안에 있는 div
		<p onclick="alert('form 안에 있는 div 안에 있는 p')">
			form 안에 있는 div 안에 있는 p
		</p>
	</div>
</form>

이 경우 p태그 안에 요소만을 클릭해도 p의 이벤트 핸들러가 동작해 alert 창이 뜨고 클릭한 이벤트가 부모 요소들로 전달되어 div, form 각각의 이벤트 핸들러가 동작해 div의 alert 창이 뜨고, form의 alert 창의 뜸을 알 수 있습니다. 이러한 흐름을 Event Bubbling이라고 합니다.

화살표 함수

기존의 익명함수

const add = function() {
};

화살표 함수

const add = () => {
};

이 화살표 함수는 기존의 익명 함수의 장점이었던

1. 재사용이 필요 없다.
2. 메모리 관리 측면에서 효과적이다.

이러한 특징에 더해 익명 함수보다 짧고 return도 생략이 가능해졌습니다.

let sum = function(a, b) {
	return a + b;
};
//--==>> 화살표 함수
let sum = (a, b) => a + b;

기존 익명 함수의 장점을 좀 더 설명해보면, 일반 함수는 재사용을 하기 위해 사용합니다. 만약 ‘더하는 행위’를 할 때마다 더하는 식을 작성하는 게 아니라 ‘더하기 함수’를 호출하면 되고 이러한 재사용을 위해 일반 함수를 사용합니다. 하지만 익명 함수는 재사용이 필요 없는 경우여서 이름을 붙여 놓지 않고 한 번만 사용하고 끝이 납니다.

화살표 함수의 차이점

화살표 함수는 무조건 익명 함수로만 사용할 수 있고, 메서드나 생성자로 사용할 수 없습니다. 또한 this나 super에 대한 바인딩이 없습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

문자열 객체 생성하기

let 참조변수 = new String(문자형 데이터);
let t1 = new String("hello");

let 참조변수 = 문자형데이터;
let t2 = "hello";

문자열 객체의 메서드 및 속성

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

배열 객체 생성

// 방식 1
let a = new Array();
a[0] = 30;
a[1] = "연구원";
a[2] = true;

// 방식 2
let b = new Array(30, "연구원", true);

// 방식 3
let c = [30, "연구원", true];

배열 객체의 메서드 및 속성

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

수학 객체의 메서드 및 상수

종류 설명

e.g.

let num = 2.1234;

let maxNum = Math.max(10, 5, 8, 30),
roundNum = Math.round(num),
rndNum = Math.random();

cf) 난수를 발생하여 원하는 구간 정수의 값 구하기

Math.floor(Math.random()*(최댓값-최솟값+1))+최솟값;

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

Date 객체 생성

let t = new Date();
let t = new Date("2022/7/20");
let t = new Date(2022,7,20);

날짜 관련 메서드

날짜 정보를 가져올 때(GET)

getFullYear() 연도 정보를 가져옴

날짜 정보를 수정할 때(SET)

setFullYear() 연도 정보만 수정함

e.g.

let today = new Date();
let nowMonth = today.getMonth() + 1;

// cf) 현재 날짜에서 특정 날짜까지 남은 일 수 계산
let nowYear = today.getFullYear();

let theDate = new Date(nowYear, 12, 24);
let diffDate = theDate.getTime() - today.getTime();

let result = Math.ceil( diffDate / (60 * 1000 * 60 * 24) );
document.write("크리스마스 D-day: " + result + "일 남았습니다.");

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

자바스크립트의 조건식은 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식된다.

0, null, “”(빈 문자), undefined

이 값들이 조건식에 입력되면 false를 반환한다.

이 외의 값은 true 로 인식된다.

e.g.

// true로 인식되는 경우
let num1=7;
if(num1) {
	document.write(num1);
}
//--==>> 7

// false로 인식된는 경우
let num2=0;
if(num2)  {
	document.write(num2);
} else {
	document.write("0은 false로 인식됩니다.");
}
//--==>> 0은 false로 인식됩니다.

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

http://www.yes24.com/Product/Goods/59461086

⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

undefined

변수에 값이 등록되기 전의 기본값

null

변수에 저장된 값이 null 인 경우

typeof

지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용

undefined와 null의 자료형은 각각 ‘undefined’와 ‘object’이다.

typeof undefined     // undefined
typeof null          // object

그래서 동등 연산자(==)와 일치 연산자(===)의 경우 차이가 있다.

null == undefined    // true
null === undefined   // false

동등 연산자(==)

동등 연산자는 자료형을 상관하지 않고 값만 일치하면 true를 반환한다.

일치 연산자(===)

일치 연산자는 동일한 타입의 동일한 값이 일치 해야만 true를 반환한다.

let a = 10;
let b = '10';

a == b          // true;
a === b         // false;

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

내부 삽입

1) append(content)

모든 요소 내부에 컨텐츠를 추가한다.

e.g.

// p 태그에 내용 추가
$("p").append("<b>제이쿼리</b>");
		:
<p>중요과목: </p>

2) appendTo(content)

요소의 내용을 다른 요소에 추가한다.

e.g.

// body 마지막 부분에 제이쿼리 추가
$("<div><p>제이쿼리</p></div>").appendTo("body");

// id가 test인 태그의 뒷 부분에 아이디가 a인 태그의 내용을 추가
$("#a").appendTo("#test");
		:
<span id="a">제이쿼리</span>
<div id="test">중요과목 : </div>
//--==>> 중요과목 : 제이쿼리

3) prepend(content)

모든 요소 내부의 선두에 컨텐츠를 삽입

4) prependTo(content)

요소의 내용을 다른 요소에 추가한다.

외부 삽입

1) after(content)

각 요소의 뒤로 컨텐츠를 삽입한다.

$("p").after("<b>강조!</b>");

2) before(content)

각 요소의 앞에 컨텐츠를 삽입한다.

3) insertAfter(content)

요소를 지정한 다른 요소의 뒤에 삽입한다.

4) insertBefore(content)

요소를 지정한 다른 요소의 앞에 삽입한다.

// 아이디가 a 인 요소 앞에 <p>콘텐츠</p> 삽입
$("<p>콘텐츠</p>").insertBefore("#a");

주위에 삽입

1) wrap(html)

각 요소를 구조적으로 지정 HTML로 둘러싼다.

e.g.

// p 요소를 지정 div로 둘러싼다.
$("p").wrap("<div class='wrap'></div>");
		:
<p>Test</p>

2) wrap(elem)

지정 요소를 실행 요소로 둘러싼다.

e.g.

// p 요소를 "a" id의 요소로 둘러싼다.
$("p").wrap($('#a'));
		:
<p>Test</p><div id="a"></div>

3) wrapAll(html)

요소 집합을 정리하고, 지정된 HTML 안에 1개로 정리해 사이에 둔다.

4) wrapAll(elem)

wrapAll(html)과 같지만, HTML 문자열은 아니고 DOM Element 등을 지정한다.

5) wrapInner(html)

요소가 가지는 각자 요소(텍스트 포함)를 HTML 지정 요소로 둘러싼다.

6) wrapInner(elem)

요소가 가지는 각자 요소(텍스트 포함)를 지정 요소로 둘러싼다.

7) unwrap()

특정한 부모 요소를 제거한다.

e.g.

// <p>태그를 감싸고 있는 <div> 요소를 제거
$('p').unwrap();
		:
<div>
	<p>Foo</p>
</div>

치환

1) replaceWith(content)

각 요소를 지정 HTML 혹은 DOM Element로 옮겨 놓는다.

2) replaceAll(selector)

지정 조건에 맞는 요소를 모두 옮겨 놓는다.

삭제

1) empty()

요소 집합으로부터 모든 자식 요소를 삭제한다.

2) remove( [ expr ] )

DOM으로부터 지정 조건에 맞는 요소를 모두 삭제한다.

3) detach( [ selector ] )

데이터를 유지한 상태로 요소 제거

detach 메소드는 remove 메소드와 달리 해당 요소가 가진 데이터 요소를 파괴하지 않는다.

이 데이터는 jQuery 의 이벤트 시스템에 보존되어 있기 때문에 .data() 메소드 등을 사용하여 다시 호출할 수 있다.

재사용될만한 요소에만 사용하는 것이 중요!

DOM에서 요소를 제거하거나 추가할 일이 빈번하게 발생할 때 유용하게 사용 할 수 있다.

복사

1) clone()

DOM 요소를 복사해 새롭게 작성

2) clone(true)

DOM 요소를, 그 요소가 가지는 이벤트도 포함해 카피한다.