[React] useState

유튜브 코딩애플 React 강의 필기

 

 

 

 

 

 

useState('') 를 사용하면 항상 두개의 변수가 들어갈 수 있는 array 가 남게된다.

[state데이터, state 데이터 변경함수]

 let [글제목,글제목변경]= useState('남자 코트 추천');

 

따라서 이렇게 두개로 형식을 맞춰줘야 함

useState() 괄호 안에는 배열, Object 등 모두 넣을 수 있다. 이는 모두 배열 형식으로 저장됨

 

그럼 왜 ! 변수가 아니라 state 를 쓸까 ? 

 => state 가 변경이 될 때 , 데이터를 담고있는 html 은 자동으로 재렌더링이된다 (re-rendering)

       일반변수는 새로고침이 됨

 

function App(){
 let [글제목,글제목변경]= useState(['남자 코트 추천','강남우동맛집']);

  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목[0] }</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

 = > state 의 배열안에는 두개의 값이 들어있다. 이때 {글제목[0]} => {글제목[1]} 로 변경해주면

       html 에서 state 안의 값이 변경되었으므로 자동으로 재렌더링이 수행됨 (without 새로고침)

= > 따라서 자주바뀌는 중요한 데이터는 변수 XX , state 로 사용

 

 

 

 

※ 이벤트핸들링

 

예제 ) 🥰 이모지를 누르면 오른쪽의 숫자가 증가되는 onClick 이벤트

 return (
    <div className="App">
      <div className="black-nav">
        <div>개발</div>
      </div>
      <div className='list'>
        <h3>{글제목[0]} <span onClick={ 함수() }>🥰</span>0</h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div>

이때 span 태그의 onClick 에서

1. 반드시 중괄호로 감싸기

2. 중괄호 안에는 함수만들어갈 수 있음

onClick = { 클릭될 때 실행할 함수 }

onClick { () => {실행할 내용 }}

 

 

 

 

[1] span 의 증가되는 숫자는 계속 변경되는 값이기 때문에 state를 사용해주자

  let [따봉, 따봉변경] = useState(0);

  = > 이렇게 따봉이라는 state를 만들어준다

        따봉의 초기값은 0

 

[2] jsx 에 state 를 {} 사용해 넣어준다

   <h3>{글제목[0]} <span>🥰</span> { 따봉 } </h3>

 

[3] onClick 이벤트에 걸 함수를 생성한다

  - 이모지를 누를때마다 따봉의 값이 변경되어야 함

  - state 는 값 변경하는 값이 따로있다. 바로 '따봉변경' 을 사용하는것 !

     ( 기존 js 처럼 {따봉 + 1} 과 같은 방법은 권장하지않음 ) 

 

  - ex ) 따봉변경(100)  : 따봉의 값이 100으로 대체된다

<h3>{글제목[0]} <span onClick={()=>{ 따봉변경(따봉+1) }}> 🥰</span>{따봉}</h3>

 

 

 

예제 ) button 을 누르면 여자코트추천으로 변경 [ 방법 1 ]

function App(){

  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let posts = '강남 고기 맛집';
  let [따봉, 따봉변경] = useState(0); 

  function 제목바꾸기() {
    글제목변경(['여자코트추천', '강남우동맛집', '파이썬독학']);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발</div>
      </div>
      <div className='list'>
        <h3>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1) }}> 🥰</span>{따봉}</h3>
        <button onClick={제목바꾸기}> 여자 </button>
        <p>2월 17일 발행</p>
        <hr/>
      </div>

1. button 에 onClick 이벤트를 걸고 {제목바꾸기} 라는 함수가 실행될 수 있도록한다.

     이때 제목바꾸기 옆에 괄호를 붙여 {제목바꾸기()} 이렇게 쓰지않는다

        => 버튼을 클릭하면 발생하는 이벤트여야 하는데 이렇게 쓰면 바로 실행이 되어버림

 

2. 글 제목에 들어간 배열을 그대로 가지고 와서 array 의 첫번째 값 '남자코트추천' 을 '여자코트추천' 으로 변경해준다

 

 = > button 클릭 시 변경된 배열의 첫번째 값이 글제목[0] 이 되기 때문에 변경성공

 

 

 

 

예제 ) button 을 누르면 여자코트추천으로 변경 [ 방법 2 ]

function App(){

  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let posts = '강남 고기 맛집';
  let [따봉, 따봉변경] = useState(0); 

  function 제목바꾸기() {
    var newArray = [...글제목];
    newArray[0] = '여자코트추천';
    글제목변경(newArray);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발</div>
      </div>
      <div className='list'>
        <h3>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1) }}> 🥰</span>{따봉}</h3>
        <button onClick={제목바꾸기}> 여자 </button>
        <p>2월 17일 발행</p>
        <hr/>

1. 글제목 array 를 복사하는 newArray 를 만든다

2. newArray[0] 값을 '여자코트추천' 으로 변경해준다

3. 글제목 에 글제목변경 함수를 통해 복사+수정한 newArray 로 대체해준다

 

 

 

 

📢 Array, Object state 데이터 수정 방법

변경함수를 써야함 ▽

기존 데이터에서 수정된 데이터를 만든다 = > state 를 copy 한 후 수정한다