2023. 3. 27

Junghan Lee·2023년 3월 27일

ESLint Prettier TIL 이벤트버블링 코드린터 포맷터

TIL Diary

목록 보기

25/52

Index

input value 초기화
-default value
-value

이벤트 전파와 버블링

규칙 정하기
-코드린터(eslint)
-코드포맷터(prettier)
-husky

Outro

input value 초기화

input tag의 두 속성

defaultValue : input tag에서 처음 보여줄 값
value : input tag에서 계속 보여줄 값

defaultValue 지정해주고 input창에 입력시 값 수정되지만 value를 지정해주고 input창에 입력해주게 되면 입력이 되지 않고 지정해준 value값만 보여지게 된다. input창 변경 후 초기화하기 위해 value값에 data 지정해주려면

const [writer, setWriter] = useState("");
const onChangeWriter = (event) => {
	setWriter(event.target.value);
}

<input value={props.writer} />

이벤트 전파와 버블링

클릭했을 때의 오류와 관련된 이벤트 버블링
게시글 목록에서 onClick이 잘 안먹히는 경우? 왜? 이벤트 버블링
이벤트 버블링 이란 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성

<form onclick="alert(form)">
	<div onclick="alert(div)">
		<p onclick="alert(p)">P</p>
	</div>
</form>

위의 구조에서 p태그 클릭시 p->div->form 순서로 경고창 생성

const onClick = (event: MouseEvent<HTMLDivElement>) => {
    if (event.target instanceof Element)
      alert(event.target.id + "님이 작성한 글입니다.");
  };
  return (
    <div>
      {data?.fetchBoards?.map((el) => (
        <div onClick={onClick} id={el.writer ?? ""}>
          <span>{el.number}</span>
          <span>{el.title}</span>
          <span>{el.writer}</span>
        </div>
      ))}
    </div>
  );

위 예제에선 onClick함수가 제목이나 내용에 있는 것이 아닌 전체를 감싸는 div에 있기 때문에 이벤트 버블링이 발생한다. (이름이 나왔다가 안나왔다가 하는 이상현상 발생 = 사실 div를 감싼 div와 그 안의 div들 사이를 클릭해야 제대로 클릭되는 것)
number, title 등 span태그가 있는 영역을 클릭할 때는 id를 받아오지 못함.
근데 어디를 클릭해도 onClick은 먹힌다?
클릭할 시 꾹 누르게 됨!(바닥까지 모두 클릭된다. -> 부모div역시 클릭된다 자식 div를 클릭해도; 부모에도 클릭이벤트가 전파(Propagation)된다;전파는 자식부터 부모까지 게속 전파됨)

해결 방안(어디를 클릭해도 제대로 나오게 하려면)
event.target.id가 아닌 event.currentTarget.id 사용(onClick이 된 타겟) = 이벤트 위임(delegation; 이벤트를 대신하라고)

event.stopPropagation() 사용시 이벤트 더이상 전파 X

버블링과 반대 방향 = 캡쳐링

협업과 코드의 규칙

협업시 보통 팀 단위로 코딩, 각자의 코드 스타일 다름 -> 일정한 규칙 정하면 일이 좀 더 수월하게 진행된다.

코드린터 : 문법상 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것. 에러는 아니기 때문에 규칙에 어긋나는지를 검사 -> vscode에서 빨간 줄이 생겨도 실행에 지장이 없음
eslint(코드린터) 예시로 중복 선언 금지, == 금지, import 순서 등이 있을 수 있으며 자체에 포메터 기능도 어느정도 있음
코드 포맷터: 코드를 보기 좋게 만들어주는 것 prettier 규칙으로는 띄어쓰기 2칸, ~길이 넘으면 줄바꿈 등이 있다
husky : git commit 하기 전에 기존의 규칙(typescript, eslint, prettier 등) 을 지켜가며 코딩을 진행했는지 검증해줌, 규칙에 어긋난다면 commit 강제 거절(.git이 있는 경로에서 진행해야 함)

eslint, prettier, eslintconfigprettier 등 설치 필요