1. 클래스형 컴포넌트 vs 함수형 컴포넌트
리액트를 사용하여 프론트엔드 개발을 할 때 두 가지방법으로 컴포넌트를 선언할 수 있다. 과거에는
클래스형 컴포넌트를 주로 사용했지만함수형 컴포넌트에 리액트 훅을 지원해주어 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
클래스형 컴포넌트의 경우 state기능,라이프 사이클 기능을 사용할 수 있다. render함수가 꼭 있어야 하고, 그 안에서 보여주어야할 JSX를 반환해줘야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = '리액트';
return <div>{name}</div>;
}
}
export default App;함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 더 편하고 메모리 자원을 덜 사용한다는 장점이 있다. 함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식이 있고 화살표 함수 방식도 있다.
function BlackDog() {
this.name = '흰강아지';
return {
name: '검정강아지',
bark: function() {
console.log(this.name + ': 멍멍!');
}
}
}
const blackDog = new Blackdog();
blackDog.bark(); // 검정강아지: 멍멍!
function WhiteDog() {
this.name = '흰강아지';
return {
name: '검정강아지',
bark: () => {
console.log(this.name + ': 멍멍!');
}
}
}
const whiteDog = new Whitedog();
whiteDog.bark(); // 흰강아지: 멍멍!function()을 사용하면 검정강아지가 나타나고 화살표함수를 사용하면 흰 강아지가 나타난다.
일반함수는 자신이 종속된 객체를 this로 가리키며,화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
클래스형 컴포넌트에서는 클래스 내의 constructor메서드에서 state의 초기값을 생성해주어야 한다. 그리고 constructor작성할 때 super(props)를 반드시 호출해주어야 한다. state를 조회할 때는 this.state로 조회하며,state의 값을 변경하고 싶을 때는 this.setState함수를 통해 바꾸어준다.
함수형 컴포넌트에서는 리액트 훅을 사용하여 useState함수를 통해 state값을 불러오고 변경할 수 있다.
2.함수 선언식과 함수 표현식의 차이
함수 선언식(Function Declaration)
function 함수명(){
구현 로직
}일반적인 프로그래밍언어에서의 함수선언과 비슷한 형식
함수표현식(Function Expression)
var test1=function(){
return '익명 함수표현식';
}
var test2=function test2(){
return '기명 함수표현식';
}- 변수 값에 함수표현을 담아 놓은 형태
- 함수표현식은 익명 함수표현식과 기명 함수 표현식으로 나눌 수 있다.
익명 함수표현식: 함수에 식별자가 주어지지 않는다.
기명 함수표현식: 함수의 식별자가 존재한다.
함수 표현식의 장점 - 클로져로 사용
클로저는 함수를 실행하기 전에 해당 함수에 변수를 넘기고 싶을 때 사용한다.
function tabsHandler(index){
return function tabClickEvent(event){
console.log(index);
};
}
var tabs=document.querySelectorAll('.tab');
var i;
for(i=0; i<tabs.length; i+=1){
tabs[i].onclick=tabsHandler(i);
}위 예제는 모든 .tabs요소에 클릭 이벤트를 추가하는 예제다. 클로저를 이용해 tabClickEvent()에서 바깥함수 tabsHandler()의 인자값 index를 접근했다는 점.
- 콜백으로 사용(다른 함수의 인자로 넘길 수 있음)
함수 선언식과 표현식의 차이점
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
function logMessage(){
return 'worked';
}
var sumNumbers;
logMessage();//'worked'
sumNumbers();// Uncaught TypeError:sumNumbers is not a function.
sumNumbers=function(){
return 10+20;
};함수 표현식 sumNumbers에서 var도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.
하지만, 실제 sumNumbers에 할당된 function로직은 호출된 이후에 선언되므로, sumNumbers는 함수로 인식하지 않고 변수로 인식한다.
참고:https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
3. push와 concat
push는 기존 배열에 값을 추가하여 원본을 바꾼다.
const array=[1,2];
array.push(3);
console.log(array);//[1,2,3]concat은 기존배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다.
const array=[1,2];
let result=array.concat(3);
console.log(array);//[1,2]
console.log(result);//[1,2,3]