리액트 함수 선언

< 함수형 컴포넌트 >

새로 만들 컴포넌트가 라이프사이클 API와 state를 사용하지 않고, props만 전달해주면 뷰를 렌더링 해주는 역할일 경우 주로 사용한다.

function 함수명 (파라미터) {
	//코드 블럭
}

장점

• 클래스형보다 선언하기 편함
• 메모리 자원 절약

리액트 공식 메뉴얼에서는 컴포넌트를 작성할 때 함수형 컴포넌트 + Hooks를 사용하도록 권장하고 있다고 한다.

 

< 화살표 함수 >

ES6부터 도입된 새로운 함수 선언 방식으로, 간단하고 간결한 문법으로 함수를 선언할 수 있다.

화살표 함수가 기존 function()을 완전히 대체할 수는 없다. 일반 함수는 자신이 종속된 객체를 this로 가리키고, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 화살표 함수는 값을 연산하여 바로 변환해야 할 때 사용한다.

(param1, param2, ..., paramN) => {statements}

//기존의 함수 표현식
const multiply = function(x, y) {
	return x * y;
};

//화살표 함수
const multiply = (x, y) => x * y;

• 화살표 함수는 함수 내부에서 실행될 문장이 한 줄일 경우, '{ }'와 'return'을 생략할 수 있다.
• 화살표 함수는 일반적으로 콜백 함수나 배열의 'map()', 'filter()', 'reduce()' 등과 함께 사용된다.

< 리액트 함수 선언 >

 

일반적으로 함수형 컴포넌트를 선언할 때 함수 표현식을 사용하고, 메소드에서는 화살표 함수 표현식을 사용한다.

 

리액트에서 함수형 컴포넌트는 UI를 렌더링하는 함수로, 상태나 라이프사이클 메소드를 사용할 수 없다. 이러한 제한적인 환경에서 함수형 컴포넌트가 복잡한 기능을 수행하게 되면 코드가 복잡해지고 유지보수가 어려워질 수 있다. 따라서 함수형 컴포넌트에서는 복잡한 기능을 구현하는 대신, 간단하고 명료한 코드를 작성하는 것이 좋다.

 

함수 표현식은 함수 이름을 지정하여 선언할 수 있기 때문에 코드 가독성을 높일 수 있다. 함수형 컴포넌트에서는 이러한 함수 표현식을 사용하여 컴포넌트 내부에서 사용할 함수를 간단하게 선언할 수 있다.

 

반면, 메소드에서는 'this' 키워드를 사용해야 하는데, 'this'는 함수가 호출될 때 동적으로 결정된다. 'this'는 함수가 호출될 때 동적으로 결정되기 때문에 일반적인 함수 표현식으로 메소드를 작성하면, 'this'가 부모 컴포넌트를 가리키지 않는 경우가 있다. 이러한 문제를 해결하기 위해 화살표 함수를 사용한다.

 

 

함수식 표현

• 함수의 이름 직접 지정할 수 있음
• 'this' 키워드가 함수 호출 시 동적으로 바인딩

화살표 함수식 표현

• 'this' 키워드가 함수를 정의할 때 정적으로 바인딩
• 함수형 컴포넌트에서는 'useState' 훅을 사용하여 상태를 관리하므로, 함수형 컴포넌트 안에서 메소드가 필요한 경우 화살표 함수식 표현을 사용하여 간단하게 작성할 수 있음