리액트(React)-state로 내용 수정

Wonju·2021년 11월 25일
0

버튼 만들고 기능을 추가하기

return (
    <html 요소들>
      <button onClick={어쩌구저쩌구}>버튼</button>
    </html 요소들>

button 태그 만들고, onClick 속성을 추가.

onClick 안에는 함수만 들어갈 수 있다.

let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "마포구 국밥 맛집",
    "코카콜라 제로 할인",
  ]);
 
 function 제목바꾸기(){
 	어쩌구저쩌구 코드~
   })
   
 return (
    <html 요소들>
      <button onClick={제목바꾸기}>버튼</button>
    </html 요소들>  

함수는 function App(){} 내부 아무데나 만들 수 있고
만든 함수를 onClick 안에 넣어준다.

미리 만들어둔 함수를 넣을 땐 소괄호를 쓰지 않는다.


제목 바꾸기 함수 만들기

state 함수는

글제목[0] = "새로운 제목입니다"

이렇게 등호 기호를 사용해 직접조작이 불가능하다는 것을 명심해야 한다.

만들어놨던 state변경함수를 활용해야 한다.

아까 글제목 state 만들때 있던 '글제목변경' 이라는 함수 사용해야 한다.

function 제목바꾸기() {
  글제목변경( ['여자코트 추천', 마포구 국밥 맛집', '코카콜라 제로 할인'] )
}

이렇게 제목바꾸기() 함수를 꾸몄다.

BUT

array가 3개가 아니라 몇백개 이렇게 길어진다면

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

이렇게 해주는 것이 좋다.

  1. '글제목' 이라는 state를 직접 수정은 불가능. 그렇기에 복사본을 만든다.

  2. 복사본을 만들어 newArray 라고 이름 붙인다.

  3. newArray의 첫번째 인덱스의 값을 '여자코트 추천' 으로 변경한다.

  4. 그걸 글제목변경()함수에 넣어 변경해준다.

중요 포인트!

자바스크립트 내에서 array/object 자료형은 등호(=)로 복사하면
별개의 복사본이 생성되는 것이 아니라 값을 공유하게 된다.

var data1 = [1,2,3];
var data2 = data1;

이건 data2 가 data1의 복사본이 아니라, 같은 값을 공유하기에
만약 data1이 [1,2,3,4] 로 수정된다면 data2도 함께 수정된다.

그렇기에 개별복사본을 만들어주어야한다.

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
var 새로운어레이 = [...원본어레이]
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

위와 같은 형태로 만들어주면 복사본이 형성된다.

... 붙여주는 것이 ES6의 신문법 spread연산자 이다.

object 자료형은 똑같지만 중괄호를 씌워주면 된다. {...어쩌구}

profile
안녕하세여

0개의 댓글