() => 함수명() 문법 사용이유 || 기존 함수모양과는 다른 state 함수

() => 함수명() 문법 사용이유

 

onClick 같은 이벤트 핸들러에 직접onClick={ setGood(good + 1)} 과 같은 함수 호출을 넣게 되면, 컴포넌트가 렌더링될 때마다 해당 함수가 실행됩니다. 즉, 사용자의 상호작용과 무관하게 함수가 불필요하게 호출되는 문제가 발생합니다.

 

반면, onClick={ () => {setGood(good + 1)}}와 같이 익명 함수를 사용하면, 실제로 사용자가 클릭했을 때만 함수가 실행됩니다. 이 방식은 실제 사용자의 동작에 의해서만 상태 변경 함수가 호출되게 하여, 불필요한 함수 호출을 방지하고, 의도한 대로 사용자 상호작용에만 반응하게 합니다.

 

또한, 이 방법을 사용하면 필요한 경우 이벤트 객체나 추가 매개변수를 함수에 전달할 수 있는 유연성도 제공합니다. 예를 들어, onClick={(e) => {setGood(good + 1)}}와 같이 사용할 수 있습니다.

---

기존 함수모양과는 다른 state 함수

질문

onClick={(e) => {setGood(good + 1)}} 궁금한게 setGood 가 state 변경 함수잖아?

그런데 '함수()' 이런식으로 쓴게 난 너무 어색하거든 내가 이상하니?

---

answer

React에서의 setState 함수 사용법은 일반적인 JavaScript 함수 호출과는 조금 다를 수 있습니다.

일반적인 JavaScript에서 함수를 호출할 때, 함수명(매개변수) 형태로 사용합니다. 예를 들어, addOne(5)와 같이 쓰면, addOne 함수에 5라는 값을 매개변수로 전달하는 것입니다.

 

하지만 React의 setState 함수(여기서는 setGood)를 사용할 때는 좀 다릅니다.

 

React의 상태 변경 함수들은 컴포넌트의 상태를 관리하는 고유한 메커니즘의 일부이기 때문에, 이들을 사용하는 방식이 다른 일반 함수나 메소드와 다를 수 있습니다.

 

일반적으로 자바스크립트에서 메소드나 함수를 호출할 때, 객체.메소드(인자) 또는 함수(인자) 형태로 사용합니다.

 

 

반면, React의 상태 변경 함수는 상태를 업데이트하는 데 사용되며, 이 과정에서 React는 컴포넌트의 재렌더링을 관리합니다. 예를 들어, setGood(good + 1) 호출은 다음과 같은 과정을 거칩니다:

1. setGood 함수는 good 상태의 현재 값에 1을 더한 새로운 값을 인자로 받습니다.
2. 이 함수는 내부적으로 React에게 상태가 변경되었음을 알립니다.
3. React는 이 변경을 감지하고, 그에 따라 컴포넌트를 적절히 재렌더링합니다.

---

이거 하나 가지고 무슨 왜 40분이나 쓰는지 모르겠지만... 난 이렇게 세세한 것도 이유를 알아야 이 내용을 잘 쓸 수 있는 것 같다.