리액트 React : onClick & state변경하는 법

1. onClick 사용법

리액트에서 click를 위한 이벤트 핸들러를 장착하기 위해서는 해당 코드에서 onClick를 선언해주고 { } 중괄호를 열어줍니.

<div onclick={실행할함수}>

 

중괄호를 열어주는 이유는 JSX 문법이기 때문입니다.

onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주시면 됩니다. 

 

<div onClick={ function(){ 실행할코드 } }> 
또는
<div onClick={ () => { 실행할코드 } }>

 

2. State 변경하는 방법

let [ count, setCount ] = useState(0);

 

state만들 때 2개까지 작명할 수 있댔는데, 두번째 작명한건 state 변경을 도와주는 함수입니다. 

그거 써야 state 변경이 가능합니다.

 

사용법은

setCount(새로운 State)

 

이렇게 쓰면 됩니다. 

왜냐면 state 변경함수는 ( ) 안에 넣은걸로 state를 갈아치워주는 함수라 그렇습니다.

 

setCount(1) 이라고 사용하면 count 이라는 state가 1로 변경됩니다.

setCount (100) 이라고 사용하면 count 이라는 state가 100으로 변경됩니다.

 

3. array, object state 변경하는 법

State가 array, object 자료일 경우

function App(){
  
  let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
      <button onClick={ ()=>{ ??? } }> 수정버튼 </button>
  )
}

 

??? 부분을 어떻게 채워야 하냐면

function App(){
  
  let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...title];
      copy[0] = '여자코트 추천';
      setTitle(copy)
    } }> 수정버튼 </button>
  )
}

 

위의 코드와 같이 

array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다.

let copy = [...title]; 코드에 '... '은 spread operator 라고하는 문법인데 array나 object 자료형 왼쪽에 붙일 수 있으며 뜻은 별거없고 괄호를 벗겨주세요~ 라는 뜻입니다. 

...[1,2,3] 이렇게 쓰면

그 자리에 1,2,3 이 남습니다. 걍 괄호 벗기기용 연산자입니다.

근데 두번째 용도도 있는데 array나 object 자료형을 복사할 때 많이 사용합니다. 

 

출처 : 코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"