Today I Learned

오늘 할일
1. 고급 웹 프로그래밍 공부 7~8챕터 공부
2. 데이터 베이스 과제 오답

[7. 훅]

• useEffect(람다함수), useMemo람다함수, useCallback람다함수, useRef(초기값)
• 의존성 배열에 []를 넣으면 마운트,언마운트 시에만 실행
• useEffect의 return함수는 언마운트 시에 호출. ServerAPI.subscrubeUserStatus(id, handle)을 사용.
• const memo=useMemo()=>{return 복잡계산(id, id);}렌더링 시 실행되며, 의존성배열이 없으면 계속 새로 계산
  빈 배열일 경우 최초 마운트 1회만 실행.
• useCallback()=>{func(var1, var2);}파라미터 변경 시 함수를 반환. 빈배열 시 마운트, 언마운트
  콜백을 자식에 넘길경우 부모 재랜더링 시 자식 랜더링 안함.
• ref객체에 .current로 접근하며 컴포넌트 생애주기와 동일. <input ref={inputElem}식으로 사용하면, inputElem의 .current는 input태그를 의미한다. ======================
• 어떤 태그에 ref속성을 주면 실행 시 콜백이 호출된다. node인자로 항목접근이 가능하다.=================
• 커스텀 훅은 어렵게 생각하지 말고 대충 값에따라 코드 지저분하니까 return에 isOnline같은거 리턴하게해서 그 결과에 따라 다른 문자 리턴되게 하려고 하는거. 주의할 점은 인자값을 안쓰더라도 받아야한다.
• [count, dec, inc]를 반환하고 여러개 사용하기위해서도 사용.

[8. 이벤트 핸들링]

• 이벤트 랜들러와 리스너차이는, 리스터가 이벤트를 감지하다가 발생 시 핸들러를 호출
• 자기 안에 정의해둔 핸들러를 별도의 전역함수마냥 this를 이용해 추가하고, 내부에서도 this를 사용할 경우 constructor에서 this.handleClick=this.handleClick.bind(this)처럼 해당 함수에서 자기자신에 접근가능하게 끔 바인딩해줘야함.
• 근데 onClick={()=>this.handleClick()}으로 람다식 사용하면 this가 알아서 바운딩 됨.
• onClick={this.deleteItem.bind(this,id)}로도 가능한데, 암시적으로 id뒤에 매개변수로 옴. (클래스컴포넌트)
• 상태변수가 const form={속성:값, 속성:값}일 때 const form2={...form, 속성:값}하면 해당 form의 속성값들이 추가.
  추가적으로 [e.target.name]: e.target.value시 해당 값을 동적으로 가져와서 jimo: val로 만들어줌. p12=========
• 키 입력 핸들러라면 onKeyPress리스터의 핸들어 내부에서 e.key==='Enter'로 비교가능

[부록]

• 임포트 시 교수님 방식대로 React로 추출
• return안의 JSX태그 내에서 {}로 값을 가져오고, 코드내에서 ``내에선 ${}로 값을 가져온다.
• null값 비교는 ===으로
• <>와 </>로 감싸는 이유는 최상위 태그 하나를 jsx에서 리턴해야하기에
• select에서 선택한 option의 onChange에 setUserId처럼 상태변경 시 숫자형일 경우 Number()로 형변환을 해야하고, 선택한 값을 select의 기본값으로 설정하기 위해 value={userId}처럼 해줘야한다.
• button disable={true}시 클릭불가
• event매개변수는 리액트의 이벤트 객체를 의미.
• 클래스 필드 constructor에서 this.state={상태변수: 상태값, }을 하면 알아서 set함수를 생성해준다. set호출 시 이전값을 인자로 받는 함수를 넣어서 반환값으로 설정 가능.
• const []는 반환값이 리스트일 때, const {}는 해당 속성값을 언패킹.
• setTimeout(()=>console.log(), 500)