React - 24.05.22

중복코드(useState, e.target.value) 리팩토링

dom에 이름달기(ref_reference(참조))

dom: return메서드 안에 있는 부분

<div id="element"> </div>

jsx문법에서는 해당 요소에 접근할때 'ref'라는 속성으로 이름을 부여한다

• ref는 어떤 상황에서 사용해야 할까?
  ->DOM을 직접 건드려야 할때
  
• this.state.clicked ? this.state.validated ? 'success' : 'failure' : ''
  -> 설명 : //clicked가 true이면 this.state.validated? 'success': 'failure'
  //clicked가 false이면 ''
  //clicked가 true이고 this.state.validated가 true이면 'success'
  //clicked가 ture이고 this.state.validated가 false이면 'faliure'
• DOM에 접근하여 조작해야 하는 경우(ref를 사용)
  1. 특정 input에 focus주기
  2. 스크롤 박스 조작하기

ref를 사용하는 방법 두가지

1. 콜백함수를 통한 ref 설정
   <input ref={reflink => (this.input=reflink)}
   

ref를 적용하는 또다른 방법(creatRef()를 사용하는 방법)

• 리액트에서는 컴포넌트에도 ref를 달 수 있다

<MyCom ref={refa => this.myCom=refa}) />

스크롤 박스 조작하기

• scrollTop : 세로 스크롤바 위치(0~350)
• scrollHeight : 스크롤이 있는 박스 안의 div 높이(650) -> 자식높이
• clientHeight : 스크롤이 있는 박스의 높이 (300) -> 부모높이
• 스크롤바를 맨 아래로 내리려면 스크롤 높이가 350이 되려면 ScrollHeight - clientHeight = scrollTop
  650-300=350
  
• 출력
  
  

map과 key값

컴포넌트의 효율적인 처리를 위하여 자바스크립트의 내장 함수인 map을 이용한다

• map 예시
  const numbers = [1,2,3,4,5];
  const processed = numbers.map(num => num*num);
  console.log(processed);
  // [1,4,9,16,25]
• key값 오류
  
  
  -> key값(index)을 추가 하여 error제거
  (이 방법 또한 잘못됨) (임시방편같은 느낌?)
  (쓰지 마시오)
  
  
• 이 방법으로 하시오
  

데이터 제거 기능구형(filter)

filter: 불변성 유지하면서 배열의 특정 항목을 지울때 사용할 수 있다

const numbers =[1,2,3,4,5,6];
const biggerThanThree = numbers.filter(number => number >3);
console.log(biggerThanThree);
//결과 :[4, 5, 6]