[React] useState 니가 뭔데 날 울려

react 공부중 최대 난관 봉착...

원래도 빠르게 이해를 하는 편은 아니지만 온갖 강의와 설명을 듣고도 어쩐지 useState가 이해가 안되서 엄청나게 좌절...

울진 않음..아직 ㅎㅎ

 

그래도 어떡해 하긴 해야되는데 라는 마음으로 유튜브 "코딩애플" 님의 React 강의를 듣게 되었다! 

당연히 여러 강의를 들을수록 경험치가 쌓이는 느낌이었는데, 코딩애플님의 강의는 컴포넌트를 이것저것 만들지 않고 정말! 간단명료하게 설명해 주셔서 기존에 10씩 쌓이던 경험치가 한 30정도씩 쌓이는 기분이었다.

중간중간 주시는 숙제도 다른 강의에서는 코드 한줄도 못 짰었는데, 이 강의에서만큼은 어째저째 성공할수 있었다 !!! 뿌듯 ദ്ദി ᵔ∇ᵔ )

아무튼 기껏 이해한거 까먹을까봐 포스팅 해놓으려고 한다.

 

 

 

/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';


function App() {
  

  let [title, setTitle] = useState(['학과 1짱 되는법', '공부 안하고 코딩 잘해지는법', '많이먹고 살 안찌는법', '여자코트 추천']);
  let [thumb, setThumb] = useState(0); 

  function ClickButton(){
    var newArray = [...title] //title의 복사본을 만든 후 newArray를 변경해주는 방법 사용
    newArray[0] = '교수님이랑 싸워서 이기는법';
    setTitle(newArray);
  }
  

  return (
    <div className="App">
     <div className='black-nav'>
       <div>개발 Blog</div>
     </div>
     <div className='list'>
       <button onClick={ClickButton}>누르세요</button>
     <h4>{ title[0] } <span onClick= { () => { setThumb(thumb + 1) } }>👍</span> {thumb} </h4>  
     <p>2월 17일 발행</p>
     <hr />
     </div>
     <div className='list'>
     <h4>{ title[1] }</h4>  
     <p>2월 17일 발행</p>
     <hr />
     </div>
     <div className='list'>
     <h4>{ title[2] }</h4>  
     <p>2월 17일 발행</p>
     <hr />
     </div>
    </div>
  );
}

export default App;

버튼을 하나 만들고, 그 버튼을 누르면 title[0]의 제목이였던 '학과 1짱 되는법' 이 '교수님이랑 싸워서 이기는 법' 으로

바뀌도록 코드를 짜 봐라 ~ 하셨는데

function CilckButton 함수를 만들고 return 에 어떤걸 넣어야 제대로 반환이 되는지 모르겠어서 기존 state(여기서는 title)의 값을 바로 접근해서 바꿨는데, 안됐다. 그리고 뭐 잘 모르겠어서 바로 강의를 들었는데 

state에 바로 접근하지 말고 변수를 하나 만들어서 title의 복사본을 만든 후 그 변수의 값을 변경해서 setTitle에 반영되도록 하라고 하셨다

그 부분의 코드가

  function ClickButton(){
    var newArray = [...title] //title의 복사본을 만든 후 newArray를 변경해주는 방법 사용
    newArray[0] = '교수님이랑 싸워서 이기는법';
    setTitle(newArray);
  }

이거다 ㅎㅎ

 

지이인짜 별거 아닌거지만 난... 정말.. useState가 어려워서..........

누군가 내 블로그를 볼까봐 진짜 걱정이 너무 되는데 

두고보십쇼. 조만간 잘해질거니까(아마도 ㅎㅎ)

 

코딩애플님 감사합니다~~~~