[ 20 ] 상태변경 (setState) 의 원리 , 활성화 버튼 실습

 

React 의 상태 업데이트는 즉시 되지 않는다 

React의 상태 업데이트는 비동기적이고 일괄적으로 처리되기 때문에, 상태 변경 요청이 발생한 즉시 상태가 변경되지 않는다. 

대신 , React 는 이벤트 핸들러 또는 그 함수의 실행이 완료될 때까지 상태 변경 요청을 모아서 일괄 처리한다.

이 기능을 통해서 불필요한 리렌더링을 방지하고 성능을 최적화 할 수 있게 된다.

 

예시 

아래의 코드를 보면 버튼 클릭 이벤트 발생 시 count를 2번 올리게 되어 있지만, 두번째 setCount 실행시 아직 이전 setCount 의 +1 이 반영이 안되어 있기 때문에  결과는 1이 된다.

import { useState} from 'react'
export default function Test(){

  const [count,setCount] = useState(0)

  const handleClick = (e)=>{
    setCount(count + 1 )
    setCount(count + 1 )
  }

  return(
    <div>
      <div>현재 카운트 : {count}</div>
      <button onClick={handleClick}>2번 올리기 버튼</button>
    </div>
  )
}

 

해결방안 

setCount 에 함수를 전달해서 사용한다.

import { useState} from 'react'
export default function Test(){

  const [count,setCount] = useState(0)

  const handleClick = (e)=>{
    setCount(prev => prev + 1 )
    setCount(prev => prev + 1 )
  }

  return(
    <div>
      <div>현재 카운트 : {count}</div>
      <button onClick={handleClick}>2번 올리기 버튼</button>
    </div>
  )
}

 

활성화 버튼 실습하기 

작성자, 제목, 그리고 내용이 모두 입력 되었을 때 버튼의 색상을 바꿔주는 실습

 

원리 

container 컴포넌트에서 3개의 input이 모두 입력되었는지 검사후 이 데이터를 props를 통해서 presenter 컴포넌트로 전달한다.

presenter 컴포넌트는 다시 이 데이터를 props를 통해 style.js 로 전달한다.

 

style.js 에서 받은 props를 사용하여 css 를 적용하는 예시

const BlueButton = styled.button`
  background-color: ${(props) => {
    return props.isActive ? "yellow" : "";
  }};
`;

 

실습 코드 

if문 안을 확인해보면 두개의 값은 상태의 값을 활용하는데 , 이벤트를 호출한 input에는 상태값이 아니라 e.target.value를 사용한다.

상태변경의 원리에 따라서 , 이벤트를 호출한 input의 상태값을 활용하면 아직 상태값이 반영이 되지 않았기 때문에 input에 값을 2번 넣어야만 작동하는 버그가 생기게 된다.

 const onChangeWriter = (e) => {
    setWriter(e.target.value);
    if (e.target.value && title && contents) {
      setIsActive(true);
    }
  };
  const onChangeTitle = (e) => {
    setTitle(e.target.value);
    if (writer && e.target.value && contents) {
      setIsActive(true);
    }
  };
  const onChangeContents = (e) => {
    setContents(e.target.value);
    if (writer && title && e.target.value) {
      setIsActive(true);
    }
  };