Fiesta Tour_15일차

        <input
          className="w-full rounded-2xl border bg-grayscale-50 p-[16px] text-black"
          type="text"
          placeholder="Write your nickname"
          value={nickname}
          onChange={(e) => setNickname(e.target.value)}
        />

 

        <input
          className="w-full rounded-2xl border bg-grayscale-50 p-[16px] text-black"
          type="text"
          placeholder="Write your nickname"
          defaultValue={nickname}
          onBlur={(e) => setNickname(e.target.value)}
        />

닉네임이 입력을 끝냈을 때만 바뀌도록 하려면 onChange 대신 onBlur 이벤트를 사용해야 합니다. onBlur 이벤트는 사용자가 입력 필드를 벗어날 때 트리거됩니다

 

입력하는 동안에는 바뀌지 않고 필드를 벗어났을 경우에만 setNickname이 변경