리액트 공부하기 - useEffect(()=>{},[])이렇게 쓰는 이유.. 함수를 인자로 받는다?

 

와앙.. 머리가 헤롱 헤롱 해서 그런가 .. ? 이상한거에서 또 헷갈리고 그래서 정리해봅니다

 

 

---

근데 리액트에서 useEffect는 왜 항상 (() => {}) 이렇게 하는거야? useEffect() {} 이건 안돼 ?

그냥 내 질문부터가.. 자바스크립트 기초가 부족해보이지만 (머쓱) .. 성장하는게 중요하니까.. 

 React에서 useEffect를 쓸 때 항상

useEffect(() => {
  // 실행할 코드
}, [의존성]);

이렇게 함수를 인자로 넘겨야 해.

---

왜 useEffect(() => {}) 이렇게 하는지?

• useEffect는 첫 번째 인자로 함수(콜백 함수)를 받는 함수야.
• 그래서 useEffect 안에 실행할 코드를 바로 쓰는 게 아니라, 함수 형태로 넘겨야 해.
• 이 함수는 컴포넌트가 렌더링된 후에 React가 실행해줘.

---

그러면 useEffect() {} 는 왜 안 될까?

• useEffect() {} 는 문법적으로도 안 되고, 함수가 아니라 그냥 빈 호출 뒤에 블록을 쓰는 거라서 문법 오류야.
• useEffect는 호출할 때 함수 인자를 받아야 하니까, useEffect(() => { })처럼 함수 형태여야 한다는 거지.

---

간단히 정리하면

• useEffect는 콜백 함수를 인자로 받는 함수 → useEffect(() => { ... })
• 그냥 useEffect() { ... }는 문법적으로 틀림.

---

 

 

 

함수를 인자로 받아야 하니까 .. ? 

"인자(argument) 받는다"가 뭔 뜻일까?

함수(예: useEffect)는 부를 때 어떤 정보(데이터)를 함수 안으로 넘겨줄 수 있어.
그걸 **인자(argument)**라고 해.

예를 들어, 엄마가 너한테 사과를 줬다고 해보자.
사과가 바로 그 함수에 넘겨주는 인자야.

function sayHello(name) {
  console.log("안녕, " + name + "!");
}

sayHello("제인");  // "제인"이 바로 인자야

여기서 "제인"이 함수 sayHello에 넘겨주는 인자야.
그래서 "안녕, 제인!" 이 출력되지.

---

React에서 useEffect도 똑같아!

useEffect라는 함수가 있는데,
이 함수는 "내가 나중에 실행할 코드를 함수(즉, 행동)를 넘겨줘!" 라고 말하는 거야.

그래서 이렇게 써야 해:

useEffect(() => {
  console.log("이 코드는 컴포넌트가 렌더링된 후에 실행돼요!");
});

여기서 () => { ... } 이게 바로 **인자(함수)**야.

---

정리하면

• 함수는 부를 때 뭔가 정보를 줄 수 있어. 그걸 인자라고 해.
• useEffect는 인자로 **"나중에 실행할 행동"**을 받는 함수야.
• 그래서 실행할 코드를 직접 넘기는 게 아니라, "실행할 코드가 담긴 함수"를 넘겨야 한다.