[React] state 끌어올리기(버튼 클릭시 값 변경)

state 상태 끌어올리기 예제이다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({handleButonClick) {
  const handleClick = () => {
    handleButtonClick();// 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

  return <button onClick={handleClick}>값 변경</button>;
}

버튼을 클릭하면 값이 변경되는 예제였다.
코드를 작성하다보니 버튼을 클릭할 때 마다 값이 변경되는 것을 구현해보고 싶어졌다.
크루님이 주신 힌트는 이러했다.
useState를 이용할 때는 이전 값을 새로운 값이 대체하기 때문에 그 부분은 조금 다른 방식으로도 구현이 가능할 것 같습니다🙌🏻
예를 들어, 단순히 클릭시 이전값으로 변환시키는 것이 아닌
클릭이벤트에 useState를 이용하여 true/false 값을 셋팅해줌과 동시에 onClick이벤트시 실행되는 함수에서 state가 true 값일때는 어떤 특정값(정원님이 말한 이전값), false일때는 또 다른 특정값(새로운값) 으로 보여지도록 할 수 있을 것 같네요!!
(토글 구현과 비슷한 원리)
하지만, 나는 이 힌트가 이해가 가지 않았다 결국 구글링을 통해서 useState에서 onClick시 상태 변화되는 방법을 참고하여 작성하였다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    if(value[0] === "날"){
    setValue("보여줄게 완전히 달라진 값");
    }else{
    setValue("날 바꿔줘!")
    }
    if(value[0] === "보"){
    setValue("미안해!")
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
    handleButtonClick();// 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

  return <button onClick={handleClick}>값 변경</button>;
}

자료를 찾아보다가 배열 방식으로 접근하여 조건문을 작성하면 원하는 바를 구현할 수 있다는 것을 알게되었다.
하지만 무언가 잘 되지 않았고 pair분께 도움을 구하고자 말씀 드렸더니 if문 조건이 잘못되었다고 하셨다 나는 바보같이 if문에 조건을 적은것이 아니라 비교구문을 적고 있었던 것이다....
이번 일을 계기로 다시 한번 기초가 중요하다는 것을 느끼게 되었다. 역시 예습보단 복습이 중요한 것 같다.
크루님이 주신 힌트대로 구현이 된 것 같지는 않지만 그래도 기능이 구현이 되어서 뿌듯하다. 작은 것 부터 하나하나 해나가다 보면 언젠간 좋은 개발자가 되어 있기를 기도하고 소망한다.