[Blog-project] state변경하기

🚀 'state' 와 'state변경함수' 란?

state는 변동이 많을 데이터의 기본값을 지정하는 것(useState()활용)
state변경함수는 기본데이터를 변경할때 쓰는 함수

let [state이름, state변경함수] = useState(기본값)

따라서 onClick 또는 onChange등의 기능을 활용하면 state변경함수를 활용할 수 있다.
1) HTML에 보여지는 부분에 {state이름}을 넣어서 기본값을 보여주고
2) event가 적용되는 부분에 onClick={ () => {state변경함수(바뀔값)} }을 넣어준다.
❗ 값을 변경할 때는 꼭 지정된 state변경함수를 써야한다!!!
❗ state를 변경하려면 state 변경함수를 꼭 이용하십시오!!!

❗ event 기능을 적용할 때, 꼭 중괄호로 감싸고, 그 안에 함수를 넣어주기
🌝 onClick = { state변경함수(변경할 값) } 🌝

onClick안에 "함수"를 적을 때, 아래 3가지 경우 모두 가능

<div onClick={ showModal }>  (showModal은 어디 다른데 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>

🚀 'state변경함수' 활용

state의 값을 완전히 대체해버리는 함수

🐣 따봉만들기 예제

function App(){

  let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] );

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div> 
          <h3> {title[0]} <span>👍</span> 0 </h3>  // 따봉과 따봉갯수를 추가
        </div>  
      </div>
    </div>
  )
}

위 예제에서 따봉버튼과 따봉버튼을 눌렀을 때 count가 되는 숫자를 추가해 주었다.
즉, 따봉버튼에 onClick 이벤트를 적용하여 클릭할때마다 count가 되도록 설정하면
숫자가 +1이 되도록 기능을 구현해야 한다.

function App(){

  let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] );
  let [like, setLike] = useState(0)  // like의 기본 state 초기값은 0으로 설정

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div> 
          <h3> {title[0]} <span>👍</span> {like} </h3>  // 변하는 값을 state로 설정
        </div>  
      </div>
    </div>
  )
}

0이라는 숫자는 변하는 값이기 때문에 state로 지정해준다. like라는 state를 생성하여 HTML에 보여질 부분에 {like} 로 넣어준다.

function App(){

  let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] );
  let [like, setLike] = useState(0)  // like의 기본 state 초기값은 0으로 설정

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div> 
          <h3> {title[0]} 
		<span onClick={ () => {setLike(like + 1)} }>👍</span> 
		// 따봉에 onClick이벤트를 설정해준다. 
		{like} 
	  </h3>  
        </div>  
      </div>
    </div>
  )
}

따봉버튼에 onClick이벤트를 설정해준다. 이벤트 기본 틀: onClick={ 함수() }
따라서 onClick={ () => {setLike(변경할 값)} }을 설정해주고, setLike 라는 state변경함수의 내용에는 앞으로 변경할 값을 담아준다.
onClick이벤트로 인해 변경하고자 하는 값은 한번 클릭할 때마다 like가 +1 되는것이기 때문에 setLike( like + 1 ) 이라고 내용을 저장해준다.

💡 state변경함수 를 활용하여 state의 값을 완전히 대체할 수 있다. 만약 state데이터를 "일부"만 변경(수정)하고 싶다면?
1) state의 데이터 일부를 변경하는 기능을 가진 함수를 만든다(=handleChangeTitle())
2) 함수 내에서 새로운 변수를 선언하고, state의 내용을 복사해서 새로운 변수에 담는다 ([...state이름])

❗ spread 연산자 사용하기
state변수를 그대로 담는건 복사가 아닌 값 공유이므로 해선 안된다. spread연산자를 사용해야만 독립적인 array 복사본을 생성해주는 copy가 가능

3) 새로운 변수에 '대체할 값'을 담는다
4) state변경함수를 실행하고 소괄호 안에 새로운 변수를 담는다

🐥 요약
리액트에서 state를 수정하고 싶으면 보통 이런 패턴으로 코드를 짠다.

수정하고 싶은 state의 deep/shallow 카피본을 하나 생성.

카피본을 입맛에 맞게 수정.

카피본을 state변경함수()에 집어넣기.

🐣 title내용 바꾸기 예제

function App(){
 
  let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] );
 
  function handleChangeTitle() {    // state내용 수정할 함수 생성
    let newTitle = [...title];      // state내용 deepcopy(spread연산자 사용)
    newTitle = '로맨스 영화 추천';    // 대체할 내용 새 변수에 담기
    setTitle(newTitle)              // state변경함수(setTitle)안에 바뀐내용 넣기
  }

  return (
    <HTML 생략>
      <button onClick={ handleChangeTitle }> 수정버튼 </button>
      // ❗ 미리 정의된 함수를 넣을 때는 소괄호를 넣지 않는게 포인트!!!!!!!!

      <h3> { title[0] } <span>👍</span> { 따봉 }</h3>
    </HTML 생략>
  )
}

Author And Source

이 문제에 관하여([Blog-project] state변경하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kirin/Blog-project-state변경하기