📌onClick 등의 event시 화살표함수를 사용하는 이유는?
강의에서 들었는데 계속 까먹어서 여기 정리해둔다. 바로 이벤트 핸들러를 작성하는 이유는 함수의 실행 시점과 this 컨텍스트를 제어하기 위해서이다.
1.실행 시점: 화살표 함수를 사용하면 함수를 정의할 때에 바로 실행되지 않고, 이벤트가 발생했을 때 실행된다.
이벤트 발생 시에만 함수가 실행됩니다.
2.this 컨텍스트: 화살표 함수는 자신만의 this를 생성하지 않고, 주변 스코프의 this 값을 그대로 사용한다.
일반 함수의 경우에는 함수가 호출될 때 실행 컨텍스트에 따라 this가 결정되지만, 화살표 함수는 상위 스코프의 this 값을 유지하는데, 이는 주로 React 컴포넌트에서 이벤트 핸들러를 작성할 때 컴포넌트의 this 컨텍스트를 유지하면서 컴포넌트의 메서드를 호출하기 위해 사용된다.
따라서 onClick(() => { navigate("/") })를 사용하면 클릭 이벤트가 발생했을 때에만 함수가 실행되고, 화살표 함수 내에서는 상위 스코프의 this 값을 유지하여 navigate("/")와 같은 작업을 처리할 수 있다.
(feat.챗지)
✅만약 화살표 함수를 쓰지 않는다면?
예를 들어
onClick(alert("확인"))을 넣은 button을 만들었다면 해당코드는 렌더링 시점에 실행되어 경고창이 표시다. 이는 onClick 이벤트 핸들러에 함수 호출 결과를 전달하고 있기 때문이다.그래서 페이지가 렌더링될때마다 경고창이 표시되게 된다. 이를 올바르게 전달하기 위해서는 함수를 전달해야한다. 그러려면 onClick={() => alert("확인")}과 같이 작성해줘야한다. 만약 화살표 함수를 안에 쓰기 싫다면 다른 곳에서 쓸 함수를 집어넣은 변수를 만들어 그 변수를 집어넣으면 된다.
예시)
fuction App(){
const onClickEventHandler=()=>{
console.log("확인")
};
return (
<div>
<p>버튼이벤트 확인용입니다.</p>
<button onClick={onClickEventHandler}></button>
</div>
)
}📌nothing to commit, working tree clean 에러 해결법
깃 push시 nothing to commit, working tree clean가 떴을 때 해결법.
1) rm -rf .git/
2) git init해서 원래 하던 대로 진행하기!
repository에 이미 .git폴더가 있어 초기화가 안돼서 생긴 오류였다. 지우고 쭉 진행하니 오류 해결!
참고사이트:
git push error 해결 방법 (nothing to commit, working tree clean)
[총정리] 깃허브(Github) 파일 업로드, 파일 올리기 (git bash)
깃 어려워서 죽겠다... 블로그들을 보고 겨우겨우 올려서 버셀에 배포함. git 다른 사람들은 잘만 쓰던데 난 왜 힘든건지... 일욜날에 공부해야겠다.
✍️느낀점
공부할게 너무나 산더미... 리액트 심화주차 들어야 하고, 자바스크립트 공부도 해야하고, 깃 쓰는 법도 공부해야하고... 시간이 나면 CSS와 CS 공부도 해야한다. 요즘 너무 정신없이 사는 듯?🥲
