230821) React 환경에서 useState의 값에 따라 button disabled 활성화/비활성화 하기

if (userOwnData?.state === "like") {
      return setLikes(true);
    } else if (userOwnData?.state === "dislike") {
      return setDislikes(true);
    }

위와 같은 코드로 userOwnData가 존재하고 그의 state에 따라 각각 useState로 설정해 둔 likes/dislikes의 boolean값을 true/false로 설정하게 만들어 두었다.

 

이 상태에서 likes/dislikes값이 true일 경우 버튼이 비활성화 되어 보이게(유저가 이미 해당 버튼을 눌렀음을 상기 시키기 위해) 하기 위해서 어떻게 해야 할지 고민을 해 보았다.

 

1. useRef 를 이용해 해당 button을 조정한다.

2. button의 disabled값을 likes/dislikes의 boolean값으로 설정한다.

 

이정도로 방법을 생각해 냈는데, 굳이 useRef를 추가하지 않아도 주어진 코드에 버튼에 disabled 값만 입력하면 되는 아주 쉬운 방법인 2번을 따랐다.

 

<button disabled={likes}>
   또가요
</button>

예시는 위와 같다. 이제 disabled 는 likes의 값이 true인지 false인지 그 여부에 따라 변경된다.

예를 들어 likes의 값이true일 경우에는 disabled 값도 true가 되기 때문에 이가 작동해 버튼이 비활성화되고, false일 경우에는 disabled 값이 false 로 작동하지 않기  때문에 버튼이 활성화 된다.

 

 

---

 

 

오늘도 잘 해냈다!