본문 바로가기

Progamming/ReactJS

[coderbyte /easy] React Button Toggle

이직을 준비하며 몇몇 회사의 코딩테스트를 보게 되었는데 

그동안 코딩테스트를 준비해 본 적이 없다보니 생소한 사이트를 많이 알게 되었다.

 

당장 내일까지 코딩해야 하는데 오늘 처음 알게 된 coderbyte

 

알고리즘 문제 말고도 구현 하는 문제들이 있어서 

그동안 봤던 사이트들하고는 또 다른 느낌이었다.

2시간 짜리 코딩테스트라는데 속이 탄다. 다 보면 분명 수치만 남을 것....

어떤 느낌일까 궁금해서 풀어본 첫 문제 <버튼 토글 구현하기>

 

 

문제 : 

We provided some simple React template code. Your goal is to modify the component so that you can properly toggle the button to switch between an ON state and an OFF state. When the button is on and it is clicked, it turns off and the text within it changes from ON to OFF and vice versa. Make use of component state for this challenge.

You are free to add classes and styles, but make sure you leave the element ID's as they are. Submit your code once it is complete and our system will validate your output.

 

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Toggle = () => {
  const [on, setOn] = useState(true);

  return (
    <button onClick={() => setOn(!on)}>{ on ? 'ON' : 'OFF' }</button>
  );
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

 

좀 놀란게 그동안 알고리즘 말고 그냥 구현하는 문제 나오면 좋겠다~

그렇게 생각했었는데... 

무슨, 그냥 테스트로 만나면 뭐든 어렵게 느껴진다 

 

'Progamming > ReactJS' 카테고리의 다른 글

[R3F] Canvas에 상자 그리기 (TIL)  (0) 2023.08.16
[R3F] 쉽게 이해하는 Three.js (TIL)  (0) 2023.08.15