✍🏻 [Code Camp_TIL] 7일차: props 활용, setState 원리

활성화 버튼 만들기

isActive, props 활용하기

기존에 input창 3개와 등록하기 버튼을 만들었다. 이번에는 모든 input창에 내용을 입력하면 버튼의 색깔이 바뀌는 기능을 추가해보았다. 참고로 소스코드는 container, presenter, styles 파일로 나누어서 저장하는 방식을 사용했다.

//BoardWrite.container.js

import { useState } from "react";
import { useMutation } from "@apollo/client";
import BoardWriteUI from "./BoardWrite.presenter";

export default function BoardWrite(props) {
  const [isActive, setIsActive] = useState(false);
  //presenter 파일에 넘겨줌. props drilling.

  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
  
  function onChangeWriter(event) {
    setWriter(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }

  function onChangeTitle(event) {
    setTitle(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }

  function onChangeContents(event) {
    setContents(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }
  
  return (
    <div>
      <BoardWriteUI
        onClickSubmit={onClickSubmit}
        onChangeWriter={onChangeWriter}
        onChangeTitle={onChangeTitle}
        onChangeContents={onChangeContents}
        isActive={isActive}
        // isActive라는 state를 isActive라는 키 값에 담아줌.
      />
    </div>
  );

//BoardWrite.presenter.js

import { Btn } from "./BoardWrite.styles";

export default function BoardWriteUI(props) {
  return (
    <div>
      <div>
        작성자: <RedInput type="text" 
    onChange={props.onChangeWriter} />
        제목: <input type="text" 
onChange={props.onChangeTitle} />
        내용: <input type="text" 
onChange={props.onChangeContents} />
        <Btn isActive={props.isActive} 
onClick={props.onClickSubmit}>
          등록하기
        </Btn>
        ;
      </div>
    </div>
  );
}

//BoardWrite.styles.js

import styled from "@emotion/styled";

export const Btn = styled.button`
  background-color: ${(props) => {
    //화살표 함수: BoardWrite.presenter.js에서 props 받아와줌.
    return props.isActive ? "yellow" : ""; 
    // 색상에서 비어있는 값 -> 회색
  }};
`;

이렇게 작성해준 결과 작성자, 제목, 내용 input 창 안을 차례대로가 아니라 무작위의 순서로 채워넣었을 때에는 버튼의 색깔이 바뀌지 않는 문제점이 생겼다.

setState 리렌더

원인을 알기 위해서는 setState의 특징을 알아야 한다.

setState는 비동기로 작동한다. state값을 바꾸고 바뀐 state 값으로 html을 다시 그려주는데(리렌더라 함), 이때 임시 저장소라는 곳에 코드를 끝까지 읽을 때까지 바뀐 state 값을 저장해두었다가 한번에 바꿔서 출력한다. 아래 예시를 보자.

function onClickCount() {
setCount(5) 
setCount(7)
setCount(9)
setCount(3) 
}

setState(setCount)가 나올 때마다 임시저장공간에 state인 count가 5로 저장되도록 한다. 임시저장공간에 5, 7, 9, 3 누적해놓다가 3으로 함수가 끝나면 1번만 리렌더한다. 매번 비효율적으로 리렌더하지 않는다.

문제는, 임시저장소에 저장해두는 동안에는 코드가 끝나지 않는 한 빈 값을 출력한다는 것이다. 다시 문제가 발생한 코드로 돌아가보자.

function onChangeWriter(event) {
    setWriter(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }

  function onChangeTitle(event) {
    setTitle(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }

  function onChangeContents(event) {
    setContents(event.target.value);
    if (writer && title && contents) {
      setIsActive(true);
    }
  }

setState(event.target.value)에서 입력한 값이 임시저장공간에 저장되고, 실제 값이 바뀌지는 않은 상태로 if 문에서 검증을 한다. 하지만 함수가 아직 끝나지 않았을 때에는 setState가 빈 값이기 때문에 검증 과정에서 빈 값이 들어가서 검증을 하고, 결과적으로 조건문이 성립하지 않게 되는 것이다.

따라서 input 창에 값이 들어왔을 때 임시저장공간에 들어간 데이터를 if 문 검증 시 바로 꺼내서 사용해주면 빈 값으로 검증을 하지 않을 수 있다!

function onChangeWriter(event) {
    setWriter(event.target.value);
    if (event.target.value && title && contents) {
      setIsActive(true);
    }
  }

  function onChangeTitle(event) {
    setTitle(event.target.value);
    if (writer && event.target.value && contents) {
      setIsActive(true);
    }
  }

  function onChangeContents(event) {
    setContents(event.target.value);
    if (writer && title && event.target.value) {
      setIsActive(true);
    }
  }

오늘의 느낀 점: '활성화 버튼 만들기' 실습을 '게시판 만들기'에도 적용할 수 있게 되었다. 오늘 배운 기능을 활용하면 사용자가 필수적으로 채워야 하는 내용을 다 채웠을 때 버튼의 색상을 바꾸어서 사용자 입장에서 보다 직관적인 UI를 만들 수 있을 것 같다.
그리고 setState의 원리를 몰랐다면 해결하지 못했을 에러 사항까지 수정했다. 단순하게 작성자, 제목, 내용을 차례대로 입력하면 버튼의 색상이 바뀔거라고 생각했고, 그것들을 순서대로 넣지 않았을 때에도 기능이 구현되어야 한다는 것을 생각하지 못했다. 이렇게 다양한 케이스를 고려해서 기능의 허점(에러)을 캐치하는 것 또한 개발자에게 꼭 필요한 태도라는 것을 배웠다. 어떠한 개념의 원리를 공부하는 것을 소홀히 하지 말고, 사소한 에러까지도 캐치하자!!

---