리액트를 공부하던 중 자주 사용되는 ES6 문법들을 정리한 글

이벤트 발생 시 함수(콜백)

// 두 함수 동일한 내용
function App() {
  addEventListner('click', function() {
    	console.log('클릭')
  })
}

function App() {
  addEventListner('click', ()=> {
    	console.log('클릭')
  })
}

리액트에서 아래 둘은 같다.

function click() {
  addEventListner('click', function() {
    	console.log('클릭')
  })
}

return(
  <button onClick={click}> 버튼 </button>
  )
//여기에 click()을 넣게 되면 바로 실행하라는 뜻이기 때문에 안된다. 
  
  --------------------
  
 //콜백함수 처리 
  return(
  <button onClick={()=>{console.log('클릭')}}> 버튼 </button>
  )

... 배열,객체 복사(state 데이터 다루기)

리액트에서는 state데이터는 직접 수정이 되면 안된다! (권장)

자바스크립트에서 Array나 object를 복사하는 방법

let [title,setTitle] = useState([제목1,제목2,제목3])

funiction change(){
  //이렇게 사용하면 이건 '값 공유'가 된다.
  // reference data 공부
  let newArray = title; 
  
  //deep copy - 새로운 복사본 생성
  // ... == 중괄호, 대괄호 둘다 제거해 주세요 란 뜻 ->
  // 중괄호를 제거해주고 새로운 중괄호에 담음으로서 새로운 배열 생성
  let newArray =[...title] 
  
  
}

즉, Array or Object state 데이터 수정 시
1. 변경함수 써야함 ( 변경함수(대체데이터)
2. state는 직업 건들면 안된다
3. ...으로 복사본을 만들어서 수정한다.
4. 수정한 값을 변경함수에 담는다.