First Project DevLog 5

Churro.·2022년 1월 24일

Devlog project

DevLog 👩🏻‍💻 software engineering bootcamp

목록 보기

41/63

2022.01.24.Mon

DevLog

Today's contribution

MyPage 구현
로그인 여부 및 접근 권한 확인
유저 정보 렌더링
username 변경 로직 구현
password 변경 모달 팝업 구현
회원 탈퇴 구현

MyPage-couple 구현
커플 신청 대상자 username 타당성 검사 후 정보 전달
커플 신청 취소 구현
커플 데이터 삭제
d-day 설정 input date type

Today's problems

MyPage 구현을 맡았다. CSS는 이미 기획때 어느정도 맞춰놓은 터라 적당히 하겠는데, 조건부연산을 사용해서 화면의 특정 부분만 바뀌게 구현하는 로직은 아직 어렵다.
git remote 가 있고, git local이 있다는 걸 제대로 학습했다.
git local, remote 둘 다에서 dev branch를 만들고, codestates/HiBye dev에서 local dev로 pull 하여 최신상태를 유지하고, (git pull origin dev)
각 기능 개발은 local feature/기능이름 branch를 따로 생성하여 그 경로에서 진행한 뒤, (현재 작업 위치는 vscode 좌측하단에서 확인)
곧바로 remote의 feature/기능이름 branch에 push한다.
마지막으로, 내 remote repo의 feature/기능이름 branch에서 codestates/HiBye dev로 Pull Request를 보낸다. (main이 아니라)

Tomorrow's contribution

TodolistBoard 구현
커플 게시판일 경우 사용자의 커플 아이디로 접근 권한 확인
커플 게시판일 경우 <Board 수정 버튼> , <Board 삭제 버튼> 표시
Todos 내용 표시 (완료되지 않음, 작성일 순으로 정렬)
Todo 추가, 완료표시, 삭제 기능

Error Handling

Error Type

onClick={() => selectMenuHandler(index)} 는 웹에서 실행이 잘 되는 반면, onClick={selectMenuHandler(index)}는 왜 실행이 되지 않고 에러페이지가 뜨는지 궁금했다.
( onClick={ } 안에 arrow function을 쓰는것과 그냥 함수이름을 쓰는 것의 차이점이 정확히 무엇인가요? )

Error Message

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Error Handling & References

(아고라 스테이츠 이용하여 해결)

결론부터 :

이벤트 처리 할때는 함수의 호출이 아닌 함수 자체를 전달 할 것!
전달할 매개변수가 있다면 화살표 함수를 활용 할 것!

JavaScript Event Listener 복습해보면 :

const btn = document.querySelector('button')

function hello(){
  console.log('hi')
}

// 예시1
btn.addEventListener('click', hello)

// 예시2
btn.addEventListener('click',()=>{
 hello()
 })

// 예시3
btn.addEventListener('click',hello())

클릭 했을때 뒤에꺼 해줘~ 라는 뜻이다. 예시1, 2는 잘 작동하지만 예시3은 함수를 바로 호출 하기 때문에 안된다.

React 에서는 :

 function hello(){
  console.log('hi')
}
// 예시 1
<button  onClick={hello}>버뜬!</button>

// 예시2
<button  onClick={()=>hello()}>버뜬!</button>

// 예시3
<button  onClick={hello()}>버뜬!</button>

React에서는 이벤트 처리할 때마다 함수를 호출하는 형태가 아닌 함수 자체를 전달한다. 그래서 예시 1은 잘 된다.
근데 예시 3은 : 버튼을 누를때마다 함수가 호출되니 상태(state)가 변경된다. React에서는 상태가 변경되면 상태와 관련된 데이터들이 다시 렌더링이 되는 특징이 있다. 그래서 예시3번 처럼 작성하면 (상태변경 함수 있는 경우) 무한으로 호출이 되는 것이다. (다만 예시는 변경함수 아니다. 오해x)
예시 2 같은 형태는 이벤트 헨들러나 콜백에 매개변수를 전달 할 때 많이 사용한다. 이벤트 핸들러에 화살표 함수를 사용하하여 감싼 다음에 매개변수를 넘겨 줄 수 있다. 콜백함수를 작성하는 경우. 함수를 호출하는 형태가 아닌, 함수자체를 넣은 것과 같기 때문에 가능하다.